.team1 {
  color: #cc4848 !important;
}
.team2 {
  color: #5d91ac !important;
}
.team3 {
  color: #c7a759 !important;
}
.team4 {
  color: #467b5a !important;
}
.team1overlay {
  filter: invert(65%) sepia(82%) saturate(563%) hue-rotate(317deg) brightness(84%) contrast(89%) drop-shadow(0 0 0.3rem black);
}
.team2overlay {
  filter: invert(51%) sepia(51%) saturate(328%) hue-rotate(156deg) brightness(96%) contrast(86%) drop-shadow(0 0 0.3rem black);
}
.team3overlay {
  filter: brightness(0) saturate(100%) invert(74%) sepia(14%) saturate(1037%) hue-rotate(360deg) brightness(94%) contrast(84%) drop-shadow(0 0 0.3rem black);
}
.team4overlay {
  filter: invert(40%) sepia(56%) saturate(273%) hue-rotate(90deg) brightness(95%) contrast(95%) drop-shadow(0 0 0.3rem black);
}
.teampic1 {
  background-image: url("../teams/images/team1.png");
}
.teampic2 {
  background-image: url("../teams/images/team2.png");
}
.teampic3 {
  background-image: url("../teams/images/team3.png");
}
.teampic4 {
  background-image: url("../teams/images/team4.png");
}
.navigation {
  bottom: 23px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  z-index: 12;
  align-items: end;
  max-width: 600px;
  margin: auto;
  left: 0;
  right: 0;
}
.navigation .nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 11%;
  height: auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  padding: 9px;
  background-image: url("images/nav_btn_bkg.png");
  filter: drop-shadow(0 5px 0.3rem black);
}
.navigation .nav:hover {
  background-image: url("images/nav_btn_selected.png");
}
.navigation .nav.active {
  background-image: url("images/nav_btn_selected.png");
}
.navigation .nav.inactive {
  background-image: url("images/nav_btn_bkg.png");
}
.navigation .nav img {
  max-width: 100%;
}
.navigation .nav .wandupgrade {
  position: absolute;
  width: 79%;
  opacity: 0;
  max-width: none;
}
.navigation .nav .wandupgrade.active {
  opacity: 1;
}
.navigation .nav .wandsmall {
  position: absolute;
  width: 79%;
  opacity: 0;
}
.navigation .nav .wandsmall.active {
  opacity: 1;
}
.navigation .nav .wandicon.inactive {
  opacity: 0;
}
.navigation .nav .secretlock {
  position: absolute;
  filter: none;
  opacity: 0;
}
.navigation .nav .secretlock.active {
  opacity: 1;
}
.navigation .nav .navsecreticon.inactive {
  opacity: 0;
}
.navigation .nav.navcamera {
  width: 13%;
}