.top-bar {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 16px;
  flex-wrap: wrap;
  // display: flex;
}

.sites {
  // width: 65%;
  font-size: 110%;

  align-items: center;
}

.sites-current,
.sites-current:hover {
  color: #ffe6c0;
  font-size: larger;
  font-weight: 700;
  text-decoration: none;
}

.top-bar-inner {
  max-width: 1200px;
  padding-left: 16px;
  padding-right: 16px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  user-select: none;

  align-items: center;
}

@media (max-width: 750px) {
  .top-bar-inner > div {
    // width: 100%;
    flex-wrap: wrap;
  }
}

.links li,
.links .separator {
  display: inline-block;
}

.links a {
  white-space: nowrap;
  color: #aaa;
}

.links a:hover {
  color: white;
}

.separator {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
  margin-left: 8px;
  margin-right: 8px;
  color: #ccc;
}

.top-bar .dropdown .button {
  margin: 0;
  margin-left: 1px;
  font-size: 20px;

  height: 34px;
  // width: 58px;
  min-width: 0;

  padding: 7px 9px;
}

.top-bar .dropdown .button:active,
.top-bar .dropdown .button.active {
  margin-top: -2px; /* Stop translation button increasing in height when active */
  margin-bottom: 2px; /* Then stop the header links / text on the left hand side from moving position as well */
}

.top-bar .dropdown i {
  margin: 0;
  margin-left: 1px;
  font-size: 30px;
  margin-top: -5px;
}

#navbar-logo {
  height: 30px; /* Size of logo image(s) */
  width: 120px;

  background-image: url("/assets/GLOBAL/img/Alt-F4-logo_colour.png");

  background-repeat: no-repeat; /* Size the image correctly */
  background-size: cover;

  vertical-align: middle; /* Centering the div */
  transform: translateY(-5%);

  display: inline-block;

  margin-right: 30px; /* Gap between links to the right */
}

#navbar-logo:hover {
  background-image: url("/assets/GLOBAL/img/Alt-F4-logo_white.png"); /* Switch to white logo on hover */
}

body:after {
  /* For preloading the hover image so it does not flicker on first hover */
  display: none;
  content: url("/assets/GLOBAL/img/Alt-F4-logo_white.png");
}

@media (max-width: 600px) {
  /* Shrink logo, gap between logo and links and the nav bar itself slightly */

  #navbar-logo {
    height: 22px; /* Shrink logo on smaller screens */
    width: 90px;

    margin-right: 15px; /* Shrink gap between logo and links as well */
  }

  .top-bar {
    padding: 8px 0px; /* Reduce padding as well */
  }

  .top-bar .dropdown .button:active,
  .top-bar .dropdown .button.active {
    margin: 0; /* Disable desktop button navbar bump fix, it causes the bump on mobile */
  }

  .hide-tag-line.flex {
    display: none;
  }
}

@media (max-width: 500px) {
  body .container {
    padding-left: 0;
    padding-right: 0;

    margin-bottom: 30px;
  }

  body .footer {
    padding-left: 0;
    padding-right: 0;
  }

  .footer .footer-inner {
    margin-bottom: 0;
    margin-top: 0;
  }

  .container-inner .panel {
    margin-top: 0;
    margin-bottom: 0;
  }

  .blog-card-text {
    .posted-by {
      display: none;
    }

    hr {
      display: none;
    }

    .snippet-2 {
      -webkit-line-clamp: 3;
    }
  }

  body .panel,
  body .panel-inset {
    padding: 8px;
  }

  body .panel-inset-lighter {
    padding: 8px;
  }
}
