/* The default app's face. Set on BODY, not on .ap — that class is only on the
   guest layout, so /user and /cp were falling back to Materialize's default
   and the three areas did not match. The app stylesheet is the last one the
   shells load, so this wins on order without needing !important. */
:root {
  --ap-font: 'Signika Negative', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--ap-font);
}

/* SCOPING (CRITICAL): this stylesheet used to be a skin's own _css/ap.css, so
   it could style bare `body`/`h1`/`.btn`. It now lives in the DEFAULT tree and
   is imported by app/(guest)/_layout.js, which means it bundles for EVERY skin
   — an unscoped rule here repaints every other skin's buttons and headings.
   So the design-wide rules below are scoped to `.ap`, the wrapper the default
   guest chrome renders. A skin that ships its own (guest)/_layout.js never
   renders that wrapper, so it keeps its own typography and buttons. Everything
   else in this file is already `.ap-*` prefixed — keep it that way. */
.ap {
  font-size: 16px;
  font-family: var(--ap-font);
}

/* Materialize pins .btn to `height: 36px; line-height: 36px`, so vertical
   padding alone cannot make the button taller — with box-sizing: border-box it
   only shrinks the content box while the 36px line box still starts BELOW the
   top padding, dropping the label ~7.5px under centre. That read as too much
   padding on top. Releasing the fixed height and the 36px line-height lets the
   padding do what it was written to do and re-centres the label. */
.ap .btn {
  height: auto;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: 20px;
}

.ap .btn.btn-secondary {
  border-color: #334155;
}

/* ─── Language switcher ────────────────────────────────────────────────────
   Rendered from the footer but pinned to the viewport, matching the reference.
   Bottom-LEFT on purpose: bottom-right is where support/chat buttons live. */
.ap .ap-translator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
}

.ap .ap-translator-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-colour);
  border-radius: 999px;
  background: var(--primary-background);
  color: var(--background-font-colour);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.ap .ap-translator-trigger .material-icons {
  font-size: 18px;
}

/* Catches the click that closes the panel without dimming the page. */
.ap .ap-translator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.ap .ap-translator-list {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 2;
  width: 220px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border-colour);
  border-radius: 14px;
  background: var(--primary-background);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.ap .ap-translator-list li {
  margin: 0;
}

.ap .ap-translator-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--background-font-colour);
  cursor: pointer;
}

.ap .ap-translator-list a:hover {
  background: var(--hover);
}

.ap .ap-translator-current {
  font-weight: 600;
  background: var(--hover);
}

/* ─── Nav brand ────────────────────────────────────────────────────────────
   An <img> in a Materialize nav sits on the text baseline of a 64px
   line-height, which parks a 36px logo well above centre — the markup used to
   correct that with an inline `top: -8px`, which still left it 21px high and
   clipping the top of the bar. Centring it properly needs no magic number. */
.ap nav .ap-nav-brand a {
  display: flex;
  align-items: center;
  height: 64px;
  margin-left: -10px; /* optical: pulls the mark back to the container edge */
}

.ap nav .ap-nav-brand img {
  display: block;
}

/* ─── Hero background video ────────────────────────────────────────────────
   The section keeps its own dark `bg bg-secondary` surface, so a failed or
   still-buffering video degrades to exactly what was there before rather than
   to a blank band. The video is painted over that, the overlay over the video,
   and the copy over the overlay. */
.ap .ap-hero {
  position: relative;
  overflow: hidden;
}

.ap .ap-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none; /* decoration — never eats a click or a scroll */
}

/* Without this the copy would have to survive whatever frame is behind it. */
.ap .ap-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(1, 1, 33, 0.55);
}

.ap .ap-hero-inner {
  position: relative; /* lifts the copy above the video + overlay */
}

/* ─── The nav sits ON the hero video ───────────────────────────────────────
   This nav is a normal in-flow element (no Materialize .navbar-fixed), so the
   hero begins BELOW it and .ap-hero's overflow:hidden clips the video short of
   the bar. Lifting the nav out of flow lets the hero start at y=0 and paint
   its video the full height, nav included.

   :has() keeps all of this to pages that actually have a hero — every other
   guest page keeps its normal in-flow, solid bar. */
.ap:has(.ap-hero) {
  position: relative; /* containing block for the nav below */
}

.ap:has(.ap-hero) nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* over the hero's video AND its overlay */
}

/* The nav no longer occupies flow, so the hero owes its content that height. */
.ap:has(.ap-hero) .ap-hero {
  padding-top: 64px;
}

/* No scroll-toggle back to a solid bar: this nav is not sticky, so it simply
   scrolls away with the hero and never ends up over other content. */
.ap:has(.ap-hero) nav {
  background: transparent;
  box-shadow: none;
}

.ap h1 {
  font-size: 72px;
  font-weight: 600;
}

.ap h2 {
  font-size: 40px;
  font-weight: 600;
}

/* ─── ap mobile drawer menu (skin-local, no M.Sidenav) ──────────────────── */

.ap-menu-trigger {
  cursor: pointer;
}

.ap-menu-trigger .material-icons {
  font-size: 28px;
  vertical-align: middle;
}

.ap-drawer-root {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  pointer-events: none;
}

.ap-drawer-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(4, 6, 16, 0.62);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ap-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 86vw;
  padding: 26px 24px 30px;
  overflow-y: auto;
  background: #10152a; /* solid fallback when backdrop-filter unsupported */
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -30px 0 70px rgba(4, 6, 16, 0.55);
  color: #e2e8f0;
  font-family: var(--ap-font);
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ap-drawer {
    background: rgba(12, 15, 25, 0.8);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

/* hairline indigo shine across the drawer top — same motif as the ap signin card */
.ap-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.75), rgba(129, 140, 248, 0));
}

.ap-drawer-root.ap-open {
  pointer-events: auto;
}

.ap-drawer-root.ap-open .ap-drawer-overlay {
  opacity: 1;
}

.ap-drawer-root.ap-open .ap-drawer {
  transform: translateX(0);
}

.ap-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.ap-drawer-brand {
  display: flex;
  align-items: center;
}

.ap-drawer-brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-right: 10px;
}

.ap-drawer-brand span {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.ap-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #a5b4fc;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ap-drawer-close:hover {
  background: rgba(79, 70, 229, 0.32);
  color: #ffffff;
}

.ap-drawer-close .material-icons {
  font-size: 21px;
}

.ap-drawer-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.8);
}

.ap-drawer-links {
  margin: 0 0 24px;
}

.ap-drawer-links li {
  list-style: none;
}

.ap-drawer-links a {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding: 12px 14px;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ap-drawer-links a .material-icons {
  font-size: 20px;
  margin-right: 12px;
  color: #818cf8;
}

.ap-drawer-links a:hover {
  background: rgba(79, 70, 229, 0.16);
  border-color: rgba(129, 140, 248, 0.3);
  color: #ffffff;
}

.ap-drawer-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.4);
}

.ap-drawer-cta p {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: rgba(226, 232, 240, 0.5);
}

/* ─── ap page hero strip (contact + article pages) ──────────────────────── */

.ap-page-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}

.ap-page-hero::before {
  content: '';
  position: absolute;
  top: -280px;
  left: 50%;
  width: 920px;
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.42) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-page-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.6), rgba(129, 140, 248, 0));
}

.ap-hero-inner {
  position: relative;
}

.ap-hero-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #a5b4fc;
}

.ap-page-hero h1 {
  margin: 0.4rem 0 1rem;
  font-size: 46px;
  color: #ffffff;
}

.ap-hero-sub {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(226, 232, 240, 0.7);
}

/* ─── ap shared frosted card ────────────────────────────────────────────── */

.ap-card {
  position: relative;
  padding: 2.2rem 2.4rem;
  background: var(--primary-background);
  border: 1px solid var(--primary-border-colour);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.1);
}

.ap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 140, 248, 0), rgba(129, 140, 248, 0.65), rgba(129, 140, 248, 0));
}

/* ─── ap contact page ───────────────────────────────────────────────────── */

.ap-contact {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-contact-panel {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem;
  background: #0c0f19;
  background-image: linear-gradient(180deg, #0f1428 0%, #0c0f19 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  color: #e2e8f0;
  box-shadow: 0 22px 60px rgba(8, 12, 30, 0.25);
}

.ap-contact-panel::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, rgba(79, 70, 229, 0) 70%);
  pointer-events: none;
}

.ap-contact-panel h5 {
  position: relative;
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

.ap-contact-panel-sub {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  color: rgba(226, 232, 240, 0.65);
}

.ap-contact-list {
  position: relative;
  margin: 0;
}

.ap-contact-list li {
  display: flex;
  align-items: center;
  padding: 11px 0;
  font-size: 15px;
  color: rgba(226, 232, 240, 0.85);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
  list-style: none;
}

.ap-contact-list li:last-child {
  border-bottom: 0;
}

.ap-contact-list .material-icons {
  font-size: 19px;
  margin-right: 12px;
  padding: 6px;
  color: #818cf8;
  background: rgba(79, 70, 229, 0.16);
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 9px;
}

.ap-contact-card h5 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: var(--background-heading-colour);
}

.ap-contact-card-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .input-field input[type='text'],
.ap-contact .ap-card .input-field input[type='email'],
.ap-contact .ap-card .input-field textarea {
  box-sizing: border-box;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--primary-border-colour);
  border-radius: 13px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ap-contact .ap-card .input-field input[type='text']:focus,
.ap-contact .ap-card .input-field input[type='email']:focus,
.ap-contact .ap-card .input-field textarea:focus {
  outline: none;
  border: 1px solid #4f46e5;
  border-bottom: 1px solid #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22);
}

.ap-contact .ap-card .input-field label {
  font-size: 13px;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: var(--primary-font-colour);
}

.ap-contact .ap-card .btn-full {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.35);
}

/* ─── ap article page ───────────────────────────────────────────────────── */

.ap-article {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.ap-article-card {
  padding: 2.6rem 2.8rem;
  font-size: 17px;
  line-height: 1.85;
  color: var(--background-font-colour);
}

.ap-article-card > div {
  margin-bottom: 0.35rem;
}

.ap-article-card b {
  color: var(--background-heading-colour);
}

.ap-article-card img.responsive-img,
.ap-article-card video {
  border-radius: 14px;
}

@media (min-width: 319px) and (max-width: 490px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .ap-drawer {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    border-radius: 0;
  }

  .ap-page-hero {
    padding: 3rem 0 3.4rem;
  }

  .ap-page-hero h1 {
    font-size: 30px;
  }

  .ap-card {
    padding: 1.6rem 1.2rem;
    border-radius: 18px;
  }

  .ap-contact {
    padding-top: 2rem;
  }

  .ap-contact-panel {
    padding: 1.8rem 1.4rem;
    border-radius: 18px;
  }

  .ap-article {
    padding-top: 2rem;
  }

  .ap-article-card {
    padding: 1.8rem 1.3rem;
    font-size: 16px;
  }
}

/* ─── Reviews wall ─────────────────────────────────────────────────────────
   DELIBERATELY NOT `.ap`-SCOPED, unlike everything above. APReviewsComponent is
   reached through TourContentComponent, which 24 skins render, and a skin with
   its own (guest)/_layout.js never emits the `.ap` wrapper — scoping these
   would blank the cards there and let the page colour show through (that was
   the blue tint in `ad`, whose --background-colour is #e6f3fd).

   Safe to leave unscoped because every selector is named `.ap-review*`, which
   only ever matches markup this one component renders. Colours come from the
   theme vars, so each skin's palette applies on its own. */

.ap-reviews {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  height: 49rem;
  max-height: 150vh;
  overflow: hidden;
  padding: 0 1rem;
  margin-top: 3rem;
  align-items: start;
}

@media (min-width: 601px) {
  .ap-reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 993px) {
  .ap-reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Columns beyond the first only exist at the widths that can hold them. */
.ap-reviews-col:nth-child(2),
.ap-reviews-col:nth-child(3) {
  display: none;
}

@media (min-width: 601px) {
  .ap-reviews-col:nth-child(2) {
    display: block;
  }
}

@media (min-width: 993px) {
  .ap-reviews-col:nth-child(3) {
    display: block;
  }
}

.ap-reviews-col {
  animation-name: ap-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Different speeds keep the columns from marching in step. */
.ap-reviews-slow {
  animation-duration: 62s;
}
.ap-reviews-mid {
  animation-duration: 48s;
}
.ap-reviews-fast {
  animation-duration: 74s;
}

@keyframes ap-marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

.ap-review {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin: 0 0 2rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.ap-reviews-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.ap-reviews-stars .material-icons {
  font-size: 20px;
  color: #06b6d4;
}

.ap-review blockquote {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--background-font-colour);
}

.ap-review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-colour);
}

.ap-review figcaption img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

/* The window's edges dissolve rather than being cut off. This is a MASK on the
   wall itself, not two gradient overlays painted in --background-colour, which
   is what it used to be: those assumed the wall always sat on the page colour,
   so anywhere it sat on a different surface — inside `.bg` (white), or in a
   skin whose page colour differs — the gradients showed as a tint over it.
   A mask fades the cards themselves and therefore needs no colour at all. */
.ap-reviews {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 8rem,
    #000 calc(100% - 8rem),
    transparent 100%
  );
}

/* Motion is decoration here — the cards are all still readable standing still. */
@media (prefers-reduced-motion: reduce) {
  .ap-reviews-col {
    animation: none;
  }
}

/* ============================================================
   (user) — dashboard area
   Moved here from (user)/user.css: the default skin has ONE
   stylesheet, same rule every skin follows (see ai-rules.md).
   ============================================================ */

/* Tab switches. The tab wrapper in a route file is keyed on the active tab
   (see wallets.js), so switching remounts that node and replays this
   animation — no transition library and no exit state to coordinate. Keep it
   short: this sits between the click and the content. */
.tab-fade {
  animation: tab-fade-in 220ms ease-out;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tab-fade {
    animation: none;
  }
}

/* ─── Asset chart (holding / mining asset tabs) ────────────────────────────
   BrokerChartsComponent fills its container, and this one had no height — so
   under two full-height buy/sell panels the chart collapsed to the widget's
   own minimum. Every wrapper down to the iframe has to be stretched, since
   the TradingView levels ask for height:100% and that resolves to nothing
   unless each ancestor has one. */

.app-asset-chart {
  height: 55vh;
  margin-top: 8px;
}

.app-asset-chart > *,
.app-asset-chart .tradingview-widget-container,
.app-asset-chart .tradingview-widget-container > div:first-child,
.app-asset-chart iframe {
  width: 100%;
  height: 100%;
}

.app-asset-chart .tradingview-widget-copyright {
  display: none;
}



/* LiveChartComponent stamps the symbol as an <h2> over the top-left of the
   plot. The page heading above already names the asset, so it is the same
   word twice — and at that size it covers the first candles. */
.app-asset-chart h2 {
  display: none;
}

/* app.css disables pointer events on every TradingView embed
   (`iframe[src*='embed-widget']`) so the DECORATIVE ones — the guest ticker
   tape, the mini sparklines — cannot swallow clicks or scroll.
   This chart is not decorative: its range switcher (1D · 1M · 3M · 1Y · 5Y ·
   All) is the whole point, and the blanket rule made those tabs dead. Give
   the interaction back here only, rather than lifting the rule globally. */
.app-asset-chart iframe[src*='embed-widget'] {
  pointer-events: auto;
}


/* ═══ /user — the dashboard ═══════════════════════════════════════════════
   Modelled on the lqo wallet layout: a glow hero carrying the headline figure
   and two pills, then two panels of rows beneath it.

   The classes are the DEFAULT skin's own (db-*), not lqo's — a skin never
   reaches into another skin's stylesheet (ai-rules #11), so the look is
   reproduced here rather than borrowed.

   Three answers and nothing else: what the account is worth, the two balances
   behind that figure, and how the closed trades have gone. */

.db-hero {
  margin: -18px -18px 20px -18px;
  padding: 30px 20px;
  border-radius: 0 0 28px 28px;
  text-align: center;
  color: #ffffff;
  background:
    radial-gradient(110% 130% at 50% 0%, rgba(230, 255, 42, 0.3), transparent 62%),
    linear-gradient(180deg, #232b06 0%, #11150a 68%, #05060a 100%);
}

.db-hero small {
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.72);
}

.db-hero h2 {
  margin: 4px 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  /* Tabular figures so the headline does not jitter as the live number ticks. */
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.db-hero-pnl {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
}

.db-up {
  color: #0eba1f;
}

.db-down {
  color: #e5484d;
}

.db-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.15s ease;
}

.db-pill:hover {
  transform: translateY(-1px);
}

.db-pill .material-icons {
  font-size: 17px;
}

.db-pill-volt {
  background: #e6ff2a;
  color: #030507;
}

.db-pill-white {
  background: #ffffff;
  color: #030507;
}

/* ─── Panels ────────────────────────────────────────────────────────────
   Side by side on a desktop, stacked on a phone. */

.db-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .db-grid {
    grid-template-columns: 1fr;
  }
}

.db-section {
  background: var(--primary-background);
  border: 1px solid var(--border-colour);
  border-radius: 18px;
  padding: 14px 16px;
}

/* Holds the panel's heading. Kept as a flex row so a control can sit beside
   the title later without the heading jumping. */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.db-section-head h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--background-heading-colour);
}

.db-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-row:hover {
  background: var(--hover);
}

.db-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: var(--background-colour);
  border: 1px solid var(--border-colour);
  color: var(--background-heading-colour);
  flex: 0 0 auto;
}

.db-row-icon .material-icons {
  font-size: 19px;
}

.db-row-name {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.db-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-row-name small {
  font-size: 11.5px;
  color: var(--primary-font-colour);
}

.db-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--background-heading-colour);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.db-empty {
  text-align: center;
  padding: 16px 0;
  color: var(--primary-font-colour);
}

/* The live row gets a quiet pulse so a number that moves does not look like a
   stored one. */
.db-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0eba1f;
  margin-right: 6px;
  vertical-align: middle;
  animation: db-pulse 2.4s ease-in-out infinite;
}

@keyframes db-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .db-live-dot { animation: none; }
}

@media (max-width: 600px) {
  .db-hero h2 {
    font-size: 34px;
  }
}

/* ─── Shared lists inside a db-section ──────────────────────────────────
   The trade lists, watchlist and their kin are Materialize `collection`
   markup and stay that way: open positions carry live profit, a countdown, a
   close button and the trader-name rule, and re-drawing those rows to match
   these panels would mean re-implementing all of it.

   So the PANEL adapts instead — the collection loses its own card edge and
   sits on the panel's rhythm rather than looking like a second card dropped
   inside the first. */

.db-section .collection {
  border: 0;
  margin: 0;
  list-style: none;
  padding-left: 0;
  background: transparent;
}

.db-section .collection .collection-item {
  background: transparent;
  border-bottom: 1px solid var(--border-colour);
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}

.db-section .collection .collection-item:last-child {
  border-bottom: 0;
}

.db-section .collection .collection-item:hover {
  background: var(--hover);
}

/* The ticket's inputs are Materialize columns inside a panel that is already
   padded, so the row's negative gutters would push them past the edge. */
.db-section form .row {
  margin-left: 0;
  margin-right: 0;
}

/* A panel that stands on its own rather than sitting in the two-column grid —
   for rows too wide to survive half the content width. */
.db-section-stacked {
  margin-top: 18px;
}


/* ---- withdrawal view ----
   The label/value lines in the transaction summary. Materialize rows carry a
   20px bottom margin, which stacked four of them into a very tall card. */
.wv-line {
  margin-bottom: 0 !important;
}

.wv-line .col {
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ============================================================
   gm — Valtrex Finance
   Gold on near-black. Dark is the default; light is the toggle.

   Conventions (mirrors the other skins):
   - Colour comes from two places. Surfaces that FLIP with the theme
     read the --gm-* tokens set by gmThemeReducer.js. Surfaces that are
     brand-fixed and stay dark in BOTH themes (guest nav, hero, footer,
     the gold CTAs on them) read the --gm-fixed-* / --gm-on-dark tokens
     declared below, which the reducer never touches.
   - --primary-button is hijacked at runtime by NODE_PRIMARY, so gm's
     own CTAs use var(--gm-gold) / var(--gm-fixed-gold), never it.
   - Layout lives in the JSX as Materialize row/col. This file paints,
     and only uses flex for the single-row arrangements the house rules
     allow (nav bars, icon-beside-text, chips).
   - Desktop first. ONE @media (max-width: 992px) block at the bottom,
     with a phone-only block after it.
   - gm.css is bundled globally while gm is the active skin, so every
     rule is scoped to a .gm-* class (the handful of deliberate
     exceptions — body type, .gm-dash .btn — are commented).
   ============================================================ */

:root {
  /* brand constants — identical in both themes */
  --gm-fixed-ink: #0b0b0d;
  --gm-fixed-ink-2: #121216;
  --gm-fixed-gold: #d4af37;
  --gm-fixed-gold-lift: #f2dc9a;
  --gm-fixed-gold-deep: #8a6a12;
  --gm-on-dark: #f5f5f5;
  --gm-on-dark-70: rgba(245, 245, 245, 0.72);
  --gm-on-dark-45: rgba(245, 245, 245, 0.46);
  --gm-on-dark-line: rgba(245, 245, 245, 0.12);
  --gm-gold-glow: rgba(212, 175, 55, 0.16);

  /* dark defaults — the reducer re-sets these on first dispatch, these
     just keep the first paint on-brand if it ever runs late */
  --gm-gold: #d4af37;
  --gm-gold-lift: #f2dc9a;
  --gm-gold-deep: #9a7418;
  --gm-gold-soft: rgba(212, 175, 55, 0.1);
  --gm-gold-line: rgba(212, 175, 55, 0.26);
  --gm-on-gold: #0e0e0e;
  --gm-ink: #08080a;
  --gm-panel: #131317;
  --gm-raise: #1b1b21;
  --gm-line: #26262d;
  --gm-heading: #f5f5f5;
  --gm-body: #9b9ba6;
  --gm-faint: #6d6d78;
  --gm-up: #27c08a;
  --gm-down: #f0616d;
  --gm-up-soft: rgba(39, 192, 138, 0.12);
  --gm-down-soft: rgba(240, 97, 109, 0.12);

  /* type roles: Montserrat is the brand face (logo + headings + body),
     IBM Plex Mono carries every figure — prices, balances, deltas */
  --gm-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --gm-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* Deliberately unscoped: the brand face is the page face, dashboard and
   admin included. Everything else in this file is .gm-* scoped. */
body {
  font-family: var(--gm-display);
  -webkit-font-smoothing: antialiased;
}

/* ─── Signature: the candle mark ──────────────────────────────────────
   The logo's V is built from trading candles. One is redrawn in CSS and
   set before every section eyebrow, so the sections are marked by the
   brand's own instrument rather than a generic bullet or number. */
.gm-mark {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 10px;
  flex: none;
}

.gm-mark::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--gm-gold);
}

.gm-mark::after {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 9px;
  height: 10px;
  border-radius: 1px;
  background: var(--gm-gold);
}

.gm-mark-dark::before,
.gm-mark-dark::after {
  background: var(--gm-fixed-gold);
}

.gm-mark-hollow::after {
  background: transparent;
  border: 1px solid var(--gm-gold);
}

.gm-eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gm-gold);
}

.gm-eyebrow-dark {
  color: var(--gm-fixed-gold);
}

/* ─── Shared type scale ───────────────────────────────────────────── */
.gm-h1 {
  margin: 0 0 18px;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--gm-on-dark);
}

.gm-h2 {
  margin: 0 0 14px;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--gm-heading);
}

.gm-h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gm-heading);
}

.gm-gold-text {
  background: linear-gradient(180deg, var(--gm-fixed-gold-lift), var(--gm-fixed-gold) 52%, var(--gm-fixed-gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gm-lede {
  font-size: 17px;
  line-height: 1.75;
  color: var(--gm-body);
}

.gm-body-text {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--gm-body);
}

.gm-num {
  font-family: var(--gm-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.gm-up {
  color: var(--gm-up);
}

.gm-down {
  color: var(--gm-down);
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.gm-btn {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--gm-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
}

.gm-btn-gold {
  background: linear-gradient(135deg, var(--gm-fixed-gold-lift), var(--gm-fixed-gold) 46%, var(--gm-fixed-gold-deep));
  color: #0e0e0e;
}

.gm-btn-gold:hover {
  color: #0e0e0e;
  transform: translateY(-1px);
}

.gm-btn-ghost {
  border-color: var(--gm-on-dark-line);
  background: transparent;
  color: var(--gm-on-dark);
}

.gm-btn-ghost:hover {
  border-color: var(--gm-fixed-gold);
  color: var(--gm-fixed-gold);
}

.gm-btn-quiet {
  border-color: var(--gm-line);
  background: transparent;
  color: var(--gm-heading);
}

.gm-btn-quiet:hover {
  border-color: var(--gm-gold);
  color: var(--gm-gold);
}

.gm-btn-sm {
  padding: 9px 16px;
  font-size: 11px;
}

/* Visible keyboard focus everywhere in the skin */
.gm-shell a:focus-visible,
.gm-shell button:focus-visible,
.gm-dash a:focus-visible,
.gm-dash button:focus-visible {
  outline: 2px solid var(--gm-fixed-gold);
  outline-offset: 3px;
}

/* ─── Guest chrome: nav ───────────────────────────────────────────── */
.gm-shell {
  background: var(--gm-ink);
  color: var(--gm-body);
}

.gm-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  /* Materialize paints <nav> with a fixed 56px height and line-height, which
     would clip the two-line brand — reset both before painting */
  height: auto;
  line-height: normal;
  background: rgba(11, 11, 13, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gm-on-dark-line);
  box-shadow: none;
}

.gm-nav-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
}

.gm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--gm-on-dark);
  text-decoration: none;
}

.gm-brand:hover {
  color: var(--gm-on-dark);
}

/* The uploaded website logo, used in place of the CSS mark in the two nav
   brand lockups (guest nav/drawer/footer + dashboard nav). The .gm-mark
   candle stays the section eyebrow bullet everywhere else. The 10px margin
   reproduces the spacing the mark had. */
.gm-brand-logo {
  display: block;
  height: 30px;
  width: auto;
  margin-right: 10px;
  border-radius: 4px;
  flex: none;
}

.gm-brand-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

.gm-brand-sub {
  display: block;
  margin-top: 3px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gm-on-dark-45);
}

.gm-nav-link {
  padding: 8px 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-on-dark-70);
  text-decoration: none;
}

.gm-nav-link:hover {
  color: var(--gm-fixed-gold);
}

/* Always visible — the settings-toggled links and admin pages are only
   reachable through the drawer (CLAUDE.md guest menu rules) */
.gm-nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--gm-on-dark-line);
  border-radius: 4px;
  background: transparent;
  color: var(--gm-on-dark);
  font-family: var(--gm-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.gm-nav-menu:hover {
  border-color: var(--gm-fixed-gold);
  color: var(--gm-fixed-gold);
}

.gm-nav-menu [class^="iconoir-"] {
  font-size: 18px;
}

/* ─── Guest chrome: drawer ────────────────────────────────────────── */
.gm-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}

.gm-drawer-root.gm-open {
  visibility: visible;
  pointer-events: auto;
}

.gm-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 5, 0.72);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.gm-drawer-root.gm-open .gm-drawer-overlay {
  opacity: 1;
}

.gm-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 88vw;
  height: 100%;
  overflow-y: auto;
  padding: 24px 22px 36px;
  background: var(--gm-fixed-ink-2);
  border-left: 1px solid var(--gm-on-dark-line);
  transform: translateX(102%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.gm-drawer-root.gm-open .gm-drawer {
  transform: translateX(0);
}

.gm-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gm-on-dark-line);
}

.gm-drawer-close {
  border: 0;
  background: none;
  color: var(--gm-on-dark-70);
  cursor: pointer;
  line-height: 1;
}

.gm-drawer-close:hover {
  color: var(--gm-fixed-gold);
}

.gm-drawer-links {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.gm-drawer-links li {
  border-bottom: 1px solid var(--gm-on-dark-line);
}

.gm-drawer-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gm-on-dark-70);
  text-decoration: none;
}

.gm-drawer-links a:hover {
  color: var(--gm-fixed-gold);
}

.gm-drawer-links [class^="iconoir-"] {
  font-size: 19px;
  color: var(--gm-fixed-gold);
}

/* ─── Dashboard drawer additions ──────────────────────────────────────
   The signed-in drawer is the SAME drawer as the guest one — it reuses
   every .gm-drawer-* rule above. These only cover what the guest drawer
   has no equivalent of: the account block in the head, and the two
   shared sidenav helpers, which ship Materialize markup that has to be
   talked back into the drawer's language. */
.gm-menu-trigger {
  cursor: pointer;
}

.gm-drawer-user {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.gm-drawer-user img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
}

.gm-drawer-user-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gm-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-drawer-user-sub {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gm-on-dark-45);
}

/* ThemeChangerSideNavComponent renders a bare <li><a>, so it inherits the
   link rules above — it only needs its icon gilded like the rest. */
.gm-drawer-links > li > a [class^="iconoir-"] {
  font-size: 19px;
  color: var(--gm-fixed-gold);
}

.gm-drawer-links > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gm-on-dark-70);
  cursor: pointer;
}

.gm-drawer-links > li > a:hover {
  color: var(--gm-fixed-gold);
}

/* TranslatorSideNavComponent is a Materialize .collapsible with its own
   white card styling — strip it back to the drawer's flat dark surface. */
/* The language picker sits at the TOP of both drawers, directly under the
   head — so it takes no top margin (the head already has padding) and its
   rule goes BELOW it, separating it from the link list rather than repeating
   the head's own border. */
.gm-drawer-tools {
  margin-top: 0;
}

.gm-drawer-tools .collapsible,
.gm-drawer-tools .collapsible li,
.gm-drawer-tools .collapsible-header,
.gm-drawer-tools .collapsible-body {
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.gm-drawer-tools .collapsible-header {
  display: flex;
  align-items: center;
  padding: 13px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-on-dark-45);
  border-bottom: 1px solid var(--gm-on-dark-line);
}

.gm-drawer-tools .collapsible-header [class^="iconoir-"] {
  color: var(--gm-fixed-gold);
}

.gm-drawer-tools .collapsible-body {
  padding: 0 0 8px;
}

.gm-drawer-tools .collapsible-body a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  font-size: 13px;
  color: var(--gm-on-dark-70);
}

.gm-drawer-tools .collapsible-body a:hover {
  color: var(--gm-fixed-gold);
}

.gm-drawer-cta {
  margin-top: 24px;
}

.gm-drawer-cta .gm-btn {
  display: block;
}

.gm-drawer-cta p {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--gm-on-dark-45);
}

/* ─── Hero ────────────────────────────────────────────────────────── */
.gm-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 84px;
  background: radial-gradient(120% 90% at 78% 8%, rgba(212, 175, 55, 0.14) 0%, transparent 58%),
    linear-gradient(180deg, var(--gm-fixed-ink) 0%, #0d0d10 100%);
  border-bottom: 1px solid var(--gm-on-dark-line);
}

/* the candle field: a quiet repeating rule behind the copy, same
   instrument as the mark, at 4% so it reads as texture not chart */
.gm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0 1px, transparent 1px 46px);
}

.gm-hero > .container {
  position: relative;
  z-index: 1;
}

.gm-hero-sub {
  max-width: 520px;
  margin: 0 0 32px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--gm-on-dark-70);
}

.gm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.gm-hero-foot {
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--gm-on-dark-line);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gm-on-dark-45);
}

/* ─── Live tape (hero panel + strip) ──────────────────────────────── */
.gm-tape-panel {
  padding: 22px;
  background: rgba(245, 245, 245, 0.03);
  border: 1px solid var(--gm-on-dark-line);
  border-top: 2px solid var(--gm-fixed-gold);
  border-radius: 6px;
}

.gm-tape-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-on-dark-45);
}

.gm-tape-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gm-fixed-gold);
}

.gm-tape-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gm-up);
  animation: gm-pulse 2.4s ease-in-out infinite;
}

@keyframes gm-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.gm-tape-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gm-on-dark-line);
}

.gm-tape-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gm-tape-pair {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gm-on-dark);
}

.gm-tape-name {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gm-on-dark-45);
}

.gm-tape-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--gm-on-dark);
}

.gm-tape-wait {
  font-size: 13px;
  color: var(--gm-on-dark-45);
}

/* ─── Sections ────────────────────────────────────────────────────── */
.gm-section {
  padding: 78px 0;
  background: var(--gm-ink);
}

.gm-section-alt {
  background: var(--gm-panel);
  border-top: 1px solid var(--gm-line);
  border-bottom: 1px solid var(--gm-line);
}

.gm-section-head {
  max-width: 720px;
  margin-bottom: 44px;
}

.gm-section-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gm-body);
}

/* ─── Card grids ─────────────────────────────────────────────────── */
/* Materialize rows float their columns, so a taller card drags the next
   one out of line. Flexing the ROW (columns keep their .col widths) is the
   one place this file touches layout: it makes each band's cards share a
   height without changing the grid. */
.gm-cards {
  display: flex;
  flex-wrap: wrap;
}

.gm-cards::after {
  display: none;
}

/* Dashboard blocks own no width — the page's column decides it (CLAUDE.md).
   When the page drops one STRAIGHT into a .gm-cards row instead of into a
   .col, it becomes a bare flex item and would shrink to its own content, so
   the row makes every non-column child fill the width it was given. */
.gm-cards > *:not(.col) {
  width: 100%;
}

.gm-card {
  height: 100%;
  padding: 26px 24px 28px;
  background: var(--gm-panel);
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.gm-section-alt .gm-card {
  background: var(--gm-raise);
}

.gm-card:hover {
  border-color: var(--gm-gold-line);
  transform: translateY(-2px);
}

.gm-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid var(--gm-gold-line);
  border-radius: 4px;
  background: var(--gm-gold-soft);
  color: var(--gm-gold);
}

.gm-card-icon [class^="iconoir-"] {
  font-size: 22px;
}

.gm-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gm-body);
}

/* ─── DeFi ledger (term / explanation rows) ───────────────────────── */
.gm-ledger {
  border-top: 1px solid var(--gm-line);
}

.gm-ledger-row {
  padding: 30px 0;
  border-bottom: 1px solid var(--gm-line);
}

.gm-ledger-term {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gm-heading);
}

.gm-ledger-tag {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--gm-gold-line);
  border-radius: 3px;
  background: var(--gm-gold-soft);
  font-family: var(--gm-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-gold);
}

.gm-ledger-row p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--gm-body);
}

.gm-ledger-row p:last-child {
  margin-bottom: 0;
}

.gm-note {
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--gm-raise);
  border: 1px solid var(--gm-line);
  border-left: 3px solid var(--gm-gold);
  border-radius: 4px;
}

.gm-section-alt .gm-note {
  background: var(--gm-panel);
}

.gm-note h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-heading);
}

.gm-note p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--gm-body);
}

.gm-note p:last-child {
  margin-bottom: 0;
}

/* ─── Steps (a real sequence, so it is numbered) ──────────────────── */
.gm-step {
  height: 100%;
  padding: 28px 24px;
  background: var(--gm-panel);
  border: 1px solid var(--gm-line);
  border-top: 2px solid var(--gm-gold);
  border-radius: 6px;
}

.gm-section-alt .gm-step {
  background: var(--gm-raise);
}

.gm-step-no {
  display: block;
  margin-bottom: 14px;
  font-family: var(--gm-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--gm-gold);
}

.gm-step p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gm-body);
}

/* ─── Infrastructure cards ───────────────────────────────────────── */
.gm-infra-card {
  height: 100%;
  overflow: hidden;
  background: var(--gm-panel);
  border: 1px solid var(--gm-line);
  border-radius: 6px;
}

.gm-section-alt .gm-infra-card {
  background: var(--gm-raise);
}

.gm-infra-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.05);
}

.gm-infra-body {
  padding: 22px 22px 26px;
}

.gm-infra-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gm-body);
}

.gm-infra-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: var(--gm-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gm-gold);
}

/* ─── Closing CTA band ───────────────────────────────────────────── */
.gm-cta-band {
  padding: 70px 0;
  background: radial-gradient(90% 140% at 50% 0%, rgba(212, 175, 55, 0.14) 0%, transparent 62%),
    var(--gm-fixed-ink);
  border-top: 1px solid var(--gm-on-dark-line);
  text-align: center;
}

.gm-cta-band h2 {
  margin: 0 0 12px;
  font-size: 2rem;
  font-weight: 800;
  color: var(--gm-on-dark);
}

.gm-cta-band p {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gm-on-dark-70);
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.gm-footer {
  padding: 64px 0 40px;
  background: var(--gm-fixed-ink);
  border-top: 1px solid var(--gm-on-dark-line);
  color: var(--gm-on-dark-70);
}

.gm-footer h6 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-fixed-gold);
}

.gm-footer p {
  margin: 0 0 10px;
  font-size: 14px;
}

.gm-footer a {
  color: var(--gm-on-dark-70);
  text-decoration: none;
}

.gm-footer a:hover {
  color: var(--gm-fixed-gold);
}

.gm-footer-brand .gm-brand {
  margin-bottom: 16px;
}

.gm-footer-brand p {
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--gm-on-dark-45);
}

.gm-footer-legal {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--gm-on-dark-line);
}

.gm-footer-legal p {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--gm-on-dark-45);
}

.gm-bread {
  padding-top: 18px;
}

/* ─── Page hero (contact + article + shared guest pages) ──────────── */
.gm-page-hero {
  position: relative;
  padding: 76px 24px 64px;
  background: radial-gradient(100% 120% at 50% 0%, rgba(212, 175, 55, 0.12) 0%, transparent 60%),
    var(--gm-fixed-ink);
  border-bottom: 1px solid var(--gm-on-dark-line);
  color: var(--gm-on-dark-70);
  text-align: center;
}

.gm-page-hero-slim {
  padding: 56px 24px 48px;
}

.gm-hero-kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gm-fixed-gold);
}

.gm-page-hero h1 {
  margin: 0 0 12px;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--gm-on-dark);
}

.gm-page-hero p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}

/* ─── Contact page ───────────────────────────────────────────────── */
.gm-contact-section {
  padding: 56px 0 68px;
  background: var(--gm-ink);
}

.gm-contact-panel {
  margin-bottom: 24px;
  padding: 28px 26px;
  background: var(--gm-panel);
  color: var(--gm-body);
  border: 1px solid var(--gm-line);
  border-top: 2px solid var(--gm-gold);
  border-radius: 6px;
}

.gm-panel-heading {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gm-heading);
}

.gm-contact-line {
  margin: 12px 0;
  font-weight: 600;
}

.gm-contact-line [class^="iconoir-"] {
  vertical-align: middle;
  margin-right: 8px;
  color: var(--gm-gold);
}

.gm-contact-facts {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gm-line);
}

.gm-contact-facts li {
  padding: 12px 0;
  border-bottom: 1px solid var(--gm-line);
}

.gm-contact-facts b {
  display: block;
  font-family: var(--gm-mono);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gm-gold);
}

.gm-contact-facts span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ─── Article page ───────────────────────────────────────────────── */
.gm-article-section {
  padding: 56px 0 76px;
  background: var(--gm-ink);
}

.gm-article-card {
  padding: 40px 44px;
  background: var(--gm-panel);
  color: var(--gm-body);
  border: 1px solid var(--gm-line);
  border-left: 3px solid var(--gm-gold);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.85;
}

.gm-article-card img.responsive-img,
.gm-article-card video.responsive-img {
  margin: 8px auto;
  border-radius: 6px;
}

/* legacy hero background, still used by the infrastructure imagery */
.app-bg-datacenter {
  background-image: url(/assets/images/GMDatacenter.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

/* ════════════════════════════════════════════════════════════════════
   Dashboard (/user)
   ═══════════════════════════════════════════════════════════════════ */
.gm-dash {
  color: var(--gm-body);
}

.gm-dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.gm-dash-hello {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gm-heading);
}

.gm-dash-date {
  margin: 4px 0 0;
  font-family: var(--gm-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-faint);
}

.gm-dash-actions {
  display: flex;
  gap: 10px;
}

/* No height here on purpose: a panel is as tall as what is inside it. It used
   to be height:100%, which stretched every panel to its tallest row-sibling
   and left short ones padded out with dead space. */
.gm-panel {
  padding: 22px 24px;
  background: var(--gm-panel);
  border: 1px solid var(--gm-line);
  border-radius: 8px;
}

/* Dashboard panels set no width of their own — the column in (user)/index.js
   does that — so when several are stacked inside one column they need the gap
   the column wrapper used to provide. Adjacent-sibling only, so a lone panel
   gains no stray trailing margin. */
.gm-panel + .gm-panel {
  margin-top: 24px;
}

.gm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.gm-panel-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-faint);
}

.gm-panel-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gm-gold);
  text-decoration: none;
}

.gm-total {
  margin: 0;
  font-family: var(--gm-mono);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gm-heading);
}

.gm-delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 3px;
  font-family: var(--gm-mono);
  font-size: 13px;
}

.gm-delta-up {
  background: var(--gm-up-soft);
  color: var(--gm-up);
}

.gm-delta-down {
  background: var(--gm-down-soft);
  color: var(--gm-down);
}

.gm-delta [class^="iconoir-"] {
  font-size: 16px;
}

.gm-mini {
  padding: 14px 0 0;
  border-top: 1px solid var(--gm-line);
  margin-top: 18px;
  /* breathing room before whatever follows the tiles — on the dashboard
     that is the asset search sitting above the chart */
  margin-bottom: 28px;
}

.gm-mini-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-faint);
}

.gm-mini-value {
  display: block;
  margin-top: 5px;
  font-family: var(--gm-mono);
  font-size: 16px;
  color: var(--gm-heading);
}

/* The chart renderers inside BrokerChartsComponent are width/height 100% and
   measure their parent, so this frame is where the chart's height actually
   comes from — the one legitimate height in the dashboard (see CLAUDE.md). */
.gm-chart-frame {
  height: 380px;
  border: 1px solid var(--gm-line);
  border-radius: 8px;
  overflow: hidden;
}

/* nested in a panel it bleeds to the panel's edges instead of boxing itself */
.gm-panel > .gm-chart-frame {
  margin: 0 -24px -22px;
  border: 0;
  border-top: 1px solid var(--gm-line);
  border-radius: 0 0 8px 8px;
}

.gm-chart-frame > div,
.gm-chart-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.gm-donut {
  height: 210px;
}

.gm-legend {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.gm-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gm-line);
  font-size: 13px;
}

.gm-legend li:last-child {
  border-bottom: 0;
}

.gm-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

.gm-legend-name {
  margin-right: auto;
  color: var(--gm-body);
}

.gm-legend-value {
  font-family: var(--gm-mono);
  color: var(--gm-heading);
}

.gm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--gm-line);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.gm-row:last-child {
  border-bottom: 0;
}

.gm-row:hover {
  background: var(--gm-gold-soft);
}

.gm-row-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  background: var(--gm-raise);
}

.gm-row-main {
  min-width: 0;
  margin-right: auto;
}

.gm-row-name {
  display: block;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gm-heading);
}

.gm-row-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--gm-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gm-faint);
}

/* Countdown on a TIMED open position. Gold rather than the row's faint grey:
   it is the only figure in the row that is running out. */
.gm-row-timer {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--gm-line);
  color: var(--gm-gold);
}

.gm-row-figures {
  text-align: right;
  flex: none;
}

.gm-row-price {
  display: block;
  font-family: var(--gm-mono);
  font-size: 13.5px;
  color: var(--gm-heading);
}

.gm-row-change {
  display: block;
  margin-top: 2px;
  font-family: var(--gm-mono);
  font-size: 11.5px;
}

.gm-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--gm-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-tag-buy {
  background: var(--gm-up-soft);
  color: var(--gm-up);
}

.gm-tag-sell {
  background: var(--gm-down-soft);
  color: var(--gm-down);
}

/* .gm-chips (the chip ROW) went with the markets type tabs — the asset search
   reaches every market by name, so the coarser filter beside it was a second
   way to do one job. .gm-chip stays: the balance panel's hide/show toggle. */
.gm-chip {
  padding: 6px 12px;
  border: 1px solid var(--gm-line);
  border-radius: 3px;
  background: none;
  font-family: var(--gm-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gm-faint);
  cursor: pointer;
}

.gm-chip:hover {
  color: var(--gm-gold);
}

.gm-chip-on {
  border-color: var(--gm-gold-line);
  background: var(--gm-gold-soft);
  color: var(--gm-gold);
}

.gm-empty {
  padding: 26px 0;
  font-size: 13.5px;
  color: var(--gm-faint);
}

.gm-empty a {
  color: var(--gm-gold);
}

.gm-stack {
  margin-bottom: 24px;
}

/* Scoped to the dashboard only: the shared trade/deposit forms rendered
   inside it are painted with NODE_PRIMARY, which is not gm's accent. */
.gm-dash .btn,
.gm-dash .btn-large,
.gm-dash .btn-small {
  background-color: var(--gm-gold);
  color: var(--gm-on-gold);
}

.gm-dash .btn:hover,
.gm-dash .btn-large:hover,
.gm-dash .btn-small:hover {
  background-color: var(--gm-gold-lift);
  color: var(--gm-on-gold);
}

/* …except the buy/sell pair, whose colour IS the meaning. Materialize's
   .green/.red carry !important, so these have to as well. */
.gm-dash .btn.green,
.gm-dash .btn.green:hover {
  background-color: var(--gm-up) !important;
  color: #04150f;
}

.gm-dash .btn.red,
.gm-dash .btn.red:hover {
  background-color: var(--gm-down) !important;
  color: #1b0507;
}

/* ─── Trade ticket (shared TradesCreateForm inside a gm panel) ─────── */
.gm-ticket-market {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--gm-raise);
  border: 1px solid var(--gm-line);
  border-radius: 6px;
}

.gm-ticket form label {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gm-faint);
}

.gm-ticket form .row {
  margin-bottom: 0;
  text-align: left;
}

.gm-ticket form input[type='number'] {
  box-sizing: border-box;
  height: 40px;
  margin: 0 0 12px;
  padding: 0 12px;
  background: var(--gm-raise);
  border: 1px solid var(--gm-line);
  border-radius: 4px;
  font-family: var(--gm-mono);
  font-size: 13px;
  color: var(--gm-heading);
}

/* Materialize's focus rule for inputs outguns any sane selector here */
.gm-ticket form input[type='number']:focus,
.gm-ticket form input[type='number']:focus-visible {
  border: 1px solid var(--gm-gold) !important;
  box-shadow: none !important;
  outline: none;
}

.gm-ticket .tabs {
  height: 38px;
  background: transparent;
}

.gm-ticket .tabs .tab a {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gm-faint);
}

.gm-ticket .tabs .tab a:hover,
.gm-ticket .tabs .tab a.active {
  background: transparent;
  color: var(--gm-gold);
}

.gm-ticket .tabs .indicator {
  background-color: var(--gm-gold);
}

.gm-ticket .btn-full {
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* ─── Stroked glyphs (GMIconComponent) ────────────────────────────────
   The brand board's icons are thin gold outlines. These are drawn, not
   an icon font, so they share one stroke weight with the .gm-mark. */
.gm-glyph {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--gm-gold);
}

/* ─── About (GMAboutComponent) ────────────────────────────────────── */
.gm-about-lead {
  max-width: 420px;
  padding-right: 20px;
}

.gm-about-lead .gm-h2 {
  margin-bottom: 18px;
}

/* floated columns of unequal height drag the next one out of line — flex the
   ROW so the five pillars land 3 + 2, same trick .gm-cards uses */
.gm-about-grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.gm-about-grid::after {
  display: none;
}

.gm-pillar {
  padding: 0 14px 30px 0;
}

.gm-pillar-glyph {
  margin-bottom: 14px;
}

.gm-pillar-title {
  margin: 0 0 7px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gm-heading);
}

.gm-pillar p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gm-body);
}

/* ─── Vision (GMVisionComponent) ──────────────────────────────────── */
.gm-vision {
  border-top: 1px solid var(--gm-gold-line);
}

.gm-vision-row {
  margin-bottom: 0;
}

.gm-vision-statement {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--gm-heading);
  max-width: 460px;
}

.gm-vision-pillars {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.gm-vision-pillars::after {
  display: none;
}

/* the divider is the band's structure: it ties the four terms back to the
   statement they came out of, rather than boxing each one in a card */
.gm-vision-pillar {
  padding: 6px 0 6px 22px;
  border-left: 1px solid var(--gm-line);
}

.gm-vision-glyph {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
}

.gm-vision-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gm-on-dark-70);
}

/* ─── Asset search above the chart (GMAssetSearchComponent) ──────────
   The results list is absolutely positioned, so the panel it sits in
   must not clip it — .gm-panel keeps its overflow visible. */
.gm-assetsearch {
  position: relative;
  margin: 0 0 16px;
}

.gm-assetsearch-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 19px;
  color: var(--gm-faint);
  pointer-events: none;
}

.gm-assetsearch-input {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  background: var(--gm-raise);
  font-family: var(--gm-display);
  font-size: 14px;
  color: var(--gm-heading);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gm-assetsearch-input::placeholder {
  color: var(--gm-faint);
}

.gm-assetsearch-input:focus,
.gm-assetsearch-input:focus-visible {
  border-color: var(--gm-gold);
  box-shadow: 0 0 0 3px var(--gm-gold-soft);
}

.gm-assetsearch-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--gm-panel);
  border: 1px solid var(--gm-line);
  border-radius: 6px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

.gm-assetsearch-list li {
  margin: 0;
}

.gm-assetsearch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: var(--gm-display);
  font-size: 14px;
  text-align: left;
  color: var(--gm-heading);
  cursor: pointer;
}

.gm-assetsearch-item:hover,
.gm-assetsearch-item:focus-visible {
  background: var(--gm-raise);
  outline: none;
}

.gm-assetsearch-item:focus-visible {
  box-shadow: inset 0 0 0 1px var(--gm-gold);
}

.gm-assetsearch-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
}

.gm-assetsearch-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gm-assetsearch-sym {
  flex: none;
  font-size: 12px;
  color: var(--gm-faint);
}

.gm-assetsearch-empty {
  padding: 12px 10px;
  font-size: 13.5px;
  color: var(--gm-body);
}

/* Dashboard nav additions (skins/gm/(user)/_layout.js) */
.gm-dash-brand {
  display: inline-flex;
  align-items: center;
}

.gm-dash-brand b {
  letter-spacing: 0.1em;
}

.gm-dash-brand .gm-brand-logo {
  height: 26px;
}

.gm-nav-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin-left: 8px;
  padding: 0 16px;
  /* Materialize gives nav links a 64px line-height — reset it or the label
     sits below the pill */
  line-height: 1;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gm-nav-action-gold {
  background: linear-gradient(135deg, var(--gm-fixed-gold-lift), var(--gm-fixed-gold) 46%, var(--gm-fixed-gold-deep));
  color: #0e0e0e;
}

.gm-nav-action-gold:hover {
  color: #0e0e0e;
}

.gm-nav-action-quiet {
  border: 1px solid var(--gm-line);
  color: var(--gm-heading);
}

.gm-nav-action [class^="iconoir-"] {
  font-size: 17px;
}

/* Mobile tab bar — mirrors the sections the dashboard actually has */
.gm-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: none;
  background: var(--gm-panel);
  border-top: 1px solid var(--gm-line);
  padding-bottom: env(safe-area-inset-bottom);
}

.gm-tabbar a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 0 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gm-faint);
  text-decoration: none;
}

.gm-tabbar a.gm-tab-on {
  color: var(--gm-gold);
}

.gm-tabbar [class^="iconoir-"] {
  font-size: 21px;
}

@media (prefers-reduced-motion: reduce) {
  .gm-card,
  .gm-btn,
  .gm-drawer,
  .gm-drawer-overlay,
  .gm-row {
    transition: none;
  }

  .gm-card:hover,
  .gm-btn-gold:hover {
    transform: none;
  }

  .gm-tape-dot {
    animation: none;
  }
}

/* ─── Tablet / mobile ────────────────────────────────────────────── */
@media (max-width: 992px) {
  .gm-h1 {
    font-size: 2.3rem;
  }

  .gm-h2 {
    font-size: 1.6rem;
  }

  /* About / Vision stack: the lead paragraph is no longer beside the
     glyphs, so it needs the gap the column gutter was providing */
  .gm-about-lead {
    max-width: none;
    padding-right: 0;
    margin-bottom: 34px;
  }

  .gm-vision-statement {
    font-size: 1.25rem;
    max-width: none;
    margin-bottom: 34px;
  }

  /* the left rule reads as a divider between columns; stacked, it would
     just be a stray line down the page */
  .gm-vision-pillar {
    padding: 6px 0 6px 16px;
  }

  .gm-hero {
    padding: 56px 0 52px;
  }

  .gm-hero-sub {
    max-width: none;
    font-size: 15.5px;
  }

  .gm-hero-actions .gm-btn {
    flex: 1 1 auto;
  }

  /* the tape stacks under the copy once the columns collapse */
  .gm-tape-panel {
    margin-top: 30px;
  }

  .gm-section {
    padding: 52px 0;
  }

  .gm-section-head {
    margin-bottom: 30px;
  }

  .gm-page-hero {
    padding: 54px 16px 46px;
  }

  .gm-page-hero-slim {
    padding: 42px 16px 36px;
  }

  .gm-page-hero h1 {
    font-size: 1.9rem;
  }

  .gm-contact-section,
  .gm-article-section {
    padding: 34px 0 48px;
  }

  .gm-article-card {
    padding: 26px 20px;
  }

  .gm-nav-inner {
    height: 60px;
  }

  .gm-cta-band {
    padding: 52px 0;
  }

  .gm-cta-band h2 {
    font-size: 1.6rem;
  }

  .gm-footer {
    padding: 46px 0 32px;
  }

  .gm-dash-head {
    flex-direction: column;
    align-items: stretch;
  }

  .gm-dash-actions .gm-btn {
    flex: 1;
  }

  .gm-total {
    font-size: 2.1rem;
  }

  .gm-chart-frame {
    height: 300px;
  }

  .gm-tabbar {
    display: flex;
  }

  /* clear the fixed tab bar */
  .gm-dash {
    padding-bottom: 68px;
  }

  /* and lift the floating WhatsApp button off it — sibling selector so this
     only applies on the pages that actually render the tab bar */
  .gm-tabbar ~ .fixed-action-btn {
    bottom: 76px;
  }
}

@media (max-width: 600px) {
  .gm-h1 {
    font-size: 2rem;
  }

  .gm-brand-sub {
    display: none;
  }

  .gm-brand-logo {
    height: 26px;
  }

  .gm-tape-panel {
    padding: 18px 16px;
  }

  .gm-panel {
    padding: 18px 16px;
  }

  .gm-chart-frame {
    height: 260px;
    margin: 0 -16px -18px;
  }

  .gm-ledger-row {
    padding: 24px 0;
  }
}


/* ─── sticky footer ───────────────────────────────────────────────────────
   Keeps the footer on the bottom edge when a page is shorter than the screen.
   No flex or grid: the shell stays in normal block flow, so nothing inside
   becomes a flex item and margins go on collapsing as before. On a long page
   there is nothing to stick to and the footer just ends the content.

   Note: this stops working if an ancestor of the footer ever sets
   overflow: hidden/auto/scroll. */

.gm-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.gm-shell > footer {
  position: sticky;
  top: 100vh;
}

@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  /* Last-resort value only — skin.js writes --primary-button on :root from
     NODE_PRIMARY (or the active skin's entry in SKIN_PRIMARY), and an inline
     style out-ranks this. */
  --primary-button: #766fb2;

  /* material-resets-public.css styles .btn-alt-secondary, .btn-trans-secondary
     and .btn-alt-secondary:hover out of this token, but nothing in the repo has
     ever DEFINED it — those three rules have always resolved var() to nothing,
     which makes the whole declaration invalid at computed-value time, so the
     border and text colour silently fell back to inherited values. A mid slate
     reads against both the light and the dark themes. */
  --secondary-button: #6078a9;

  --secondary-link-colour: #766fb2;

  --primary-border-colour: silver;
}

iframe[src*='embed-widget'] {
  pointer-events: none;
}

#goog-gt-vt {
  display: none;
}

iframe.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none;
}

/* Hide the Google Translate top banner */
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}