:root {
      --orange: #fd7e14;
      --orange-h: #fb923c;
      --orange-lt: #fff4ec;
      --orange-md: rgba(253, 126, 20, .15);
      --blue: #1a4494;
      --blue-deep: #0d2f6b;
      --blue-lt: #eef3fb;
      --blue-md: #d6e4f7;
      --white: #ffffff;
      --g50: #f8fafd;
      --g100: #eef1f7;
      --g200: #dde4ef;
      --g400: #94a3b8;
      --g600: #4b5e7a;
      --g800: #1e2f4a;
      --ease: cubic-bezier(.4, 0, .2, 1);
  }

  /* ════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════ */
  .topbar {
      background: var(--blue-deep);
      padding: 8px 0;
      font-size: 12.5px;
      font-family: 'Open Sans', sans-serif;
      border-bottom: 2px solid var(--orange);
  }

  .topbar a {
      color: rgba(255, 255, 255, .75);
      text-decoration: none;
      transition: color .2s;
  }

  .topbar a:hover {
      color: var(--orange);
  }

  .topbar i {
      color: var(--orange);
      margin-right: 5px;
  }

  .topbar-social a {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .7);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      margin-left: 5px;
      transition: all .22s;
      text-decoration: none;
  }

  .topbar-social a:hover {
      background: var(--orange);
      transform: translateY(-2px);
  }

  .topbar-social i:hover {
      color: var(--blue-deep) !important;
      transform: translateY(-2px);
  }