.navbar__link {
  cursor: pointer;
}
.navbar--black,
.navbar--black .navbar__logo,
.navbar--black .navbar__link {
  background-color: #4a4a4a;
  color: #f4f5f5;
}
.navbar--black .navbar__link:hover {
  background-color: #605f5f;
  color: #f4f5f5;
}
.navbar--black .navbar__link:active {
  background-color: #292929;
  color: #f4f5f5;
}
.navbar--blue,
.navbar--blue .navbar__logo,
.navbar--blue .navbar__link {
  background-color: #388cbf;
  color: #f4f5f5;
}
.navbar--blue .navbar__link:hover {
  background-color: #5bb2e7;
  color: #f4f5f5;
}
.navbar--blue .navbar__link:active {
  background-color: #216995;
  color: #f4f5f5;
}
.navbar--gray,
.navbar--gray .navbar__logo,
.navbar--gray .navbar__link {
  background-color: #e2e8ec;
  color: #4a4a4a;
}
.navbar--gray .navbar__link:hover {
  background-color: #f3f3f3;
  color: #626262;
}
.navbar--gray .navbar__link:active {
  background-color: #dfdfdf;
  color: #626262;
}
.navbar--green,
.navbar--green .navbar__logo,
.navbar--green .navbar__link {
  background-color: #5ee6a5;
  color: #408665;
}
.navbar--green .navbar__link:hover {
  background-color: #96f5c7;
  color: #3b7d5e;
}
.navbar--green .navbar__link:active {
  background-color: #4fd695;
  color: #2b694c;
}
.navbar--orange,
.navbar--orange .navbar__logo,
.navbar--orange .navbar__link {
  background-color: #ffbc89;
  color: #b5792b;
}
.navbar--orange .navbar__link:hover {
  background-color: #ffc794;
  color: #b5792b;
}
.navbar--orange .navbar__link:active {
  background-color: #fba05a;
  color: #8a5817;
}
.navbar--purple,
.navbar--purple .navbar__logo,
.navbar--purple .navbar__link {
  background-color: #d08bfa;
  color: #3f0658;
}
.navbar--purple .navbar__link:hover {
  background-color: #ddaff9;
  color: #2c063e;
}
.navbar--purple .navbar__link:active {
  background-color: #ca89f2;
  color: #340f45;
}
.navbar--red,
.navbar--red .navbar__logo,
.navbar--red .navbar__link {
  background-color: #e32d2d;
  color: #ffe3e3;
}
.navbar--red .navbar__link:hover {
  background-color: #e84a4a;
  color: #ffe3e3;
}
.navbar--red .navbar__link:active {
  background-color: #c22828;
  color: #ffe3e3;
}
.navbar--yellow,
.navbar--yellow .navbar__logo,
.navbar--yellow .navbar__link {
  background-color: #fffba4;
  color: #7d7945;
}
.navbar--yellow .navbar__link:hover {
  background-color: #fffcbd;
  color: #847e37;
}
.navbar--yellow .navbar__link:active {
  background-color: #fffba3;
  color: #7d7945;
}
.navbar--flex .navbar__title {
  -ms-flex: 1;
  flex: 1;
}
.navbar--flex {
  -ms-flex-align: center;
  align-items: center;
}
.navbar__link {
  text-decoration: none;
}
.navbar--flex .navbar__title {
  text-align: right;
}
.navbar--flex {
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
}
.navbar__link {
  display: inline-block;
}
.navbar__title,
.navbar__logo {
  margin: 0;
}
.navbar {
  padding: 0 1em;
}
.navbar__title,
.navbar__logo {
  line-height: 1;
}
.navbar__link {
  padding: 1em;
}
.navbar__link {
  transition: 0.2s ease-out;
}
.navbar__logo {
  max-height: 100%;
}