/* (google "css filter black to color" to get a generator for these filters) */
/* sadly this is the only way to "colorize" I found that works on "localhost"... */
.colorize-combat img {
  filter: invert(20%) sepia(78%) saturate(6992%) hue-rotate(356deg) brightness(110%) contrast(118%);
}

.colorize-brawn img {
  filter: invert(37%) sepia(97%) saturate(1593%) hue-rotate(2deg) brightness(105%) contrast(105%);
}

.colorize-survival img {
  filter: invert(44%) sepia(95%) saturate(886%) hue-rotate(84deg) brightness(126%) contrast(122%);
}

.colorize-intrigue img {
  filter: invert(52%) sepia(10%) saturate(997%) hue-rotate(242deg) brightness(87%) contrast(89%);
}

.colorize-slaving img {
  filter: invert(93%) sepia(5%) saturate(28%) hue-rotate(324deg) brightness(77%) contrast(90%);
}

.colorize-knowledge img {
  filter: invert(89%) sepia(84%) saturate(6354%) hue-rotate(107deg) brightness(105%) contrast(109%);
}

.colorize-social img {
  filter: invert(54%) sepia(76%) saturate(312%) hue-rotate(177deg) brightness(86%) contrast(98%);
}

.colorize-aid img {
  filter: invert(67%) sepia(31%) saturate(280%) hue-rotate(314deg) brightness(105%) contrast(97%);
}

.colorize-arcane img {
  filter: invert(16%) sepia(94%) saturate(4329%) hue-rotate(298deg) brightness(121%) contrast(119%);
}

.colorize-sex img {
  filter: invert(83%) sepia(98%) saturate(5454%) hue-rotate(357deg) brightness(103%) contrast(101%);
}

.colorize-white img {
  filter: invert(100%);
}

.colorize-gold img {
  filter: invert(76%) sepia(81%) saturate(1209%) hue-rotate(360deg) brightness(105%) contrast(101%);
}

.colorize-cyan img {
  filter: invert(97%) sepia(11%) saturate(972%) hue-rotate(87deg) brightness(94%) contrast(120%);
}

.flip-horizontal {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}