body {
  background-color: #263238;
}

td { font-size: 20px; }

th {
  font-size: 22px;
  text-align: center;
}

.align-middle td { vertical-align: middle !important; }
.green { color: #0ce3ac; }

.exp-1 { border: 2px solid #795548; }
.exp-2 { border: 2px solid #1b5e20; }
.exp-3 { border: 2px solid #0d47a1; }

.guild { color: rgba(0,255,0,0.7); }

.search {
  height: 35px;
  width: 35px;
  background-color: #464545;
  font-size: 12px;

  text-decoration: none;
}

.search-input {
  height: 35px;
  width: 105px;
  background-color: #464545;
  color: #ffab00;
  font-size: 12px;

  text-decoration: none;
  border: none;
  padding: 10px;
}

.arrow {
  height: 30px;
  width: 30px;
  background-color: #464545;

  border: none;
  text-decoration: none;
}

.arrow-left {
  border: none;
  border-radius: 1em;
  border-top-right-radius: 0em;
  border-bottom-right-radius: 0em;
}
.arrow-right {
  border: none;
  border-radius: 1em;
  border-top-left-radius: 0em;
  border-bottom-left-radius: 0em;
}

.arrow:hover, .search:hover, .search-input:hover { color: #ffab00; }

.img-32 {
  width: 32px;
  height: 32px;
}

@media only screen and (max-width: 768px) {
  .table * {
    font-size: 15px !important;
  }
}

@media only screen and (max-width: 610px) {
  .table * {
    font-size: 10px !important;
  }
}

@media only screen and (max-width: 420px) {
    .table * {
      font-size: 8px !important;
    }

    .img-32 {
      width: 12px;
      height: 12px;
    }

    .search-input {
      width: 85px;
    }

    .container {
      padding-left: 0px;
      padding-right: 0px;
    }

    .col-xs-12 {
      padding-left: 8px;
      padding-right: 8px;
    }
}

/* Menu */
.menu a {
  font-size: 28px;
  padding: 20px 50px;
  border: 1px solid #a1887f;
  transition: .2s all;
}

.menu a:hover {
  color: #ffab00;
  transition: .2s all;
}

@media only screen and (max-width: 470px) {
  .menu a {
    font-size: 20px;
  }
}

@media only screen and (max-width: 399px) {
  .menu a {
    font-size: 20px;
    padding: 8px 25px;
  }
}

/* General */
.general tr {
  transition: all .5s;
}

.general tr:hover {
  background-color: rgba(0,255,0,0.1) !important;
  transition: all .5s;
  cursor: pointer;
}

/* Instance Ranks */
.instances * {
  font-size: 40px;
}

.instances td {
  vertical-align: middle !important;
}

.instances tr td div {
  position: relative;
  display: inline-block;
}

.instances img {
  border-radius: 4em;
  transition: 2s all;
  display: block;
}

.instances tr:hover img {
  border-radius: 0em;
  transition: 1.5s all;
}

.instances tr:hover {
  transition: all .5s;
}

.instances tr:hover {
  background-color: rgba(0,255,0,0.1) !important;
  cursor: pointer;
  transition: all .5s;
}

.heroic {
  position: absolute;
  display: block;
  z-index: 1;

  margin-left: 37px;
  margin-top: 37px;

  height: 75px;
  width: 75px;

  opacity: 1;
  transition: .5s all;
}

.instances tr td div:hover .heroic {
  opacity: 0;
  transition: .5s all;
}

/* First Kill Annuali */
.fka tr {
  transition: all .5s;
}

.fka tr:hover {
  /*background-color: rgb(49, 176, 213, 0.3);*/
  transition: all .5s;
  cursor: pointer;
}

.fka .lich-king         { border: 2px solid transparent; }
.fka .lich-king:hover   { background-color: rgba(228, 92, 0, 0.2);  border: 2px solid rgba(255, 255, 0, 0.5); }
.fka .kel-thuzad:hover  { background-color: rgba(126, 63, 157, 0.3); }
.fka .algalon:hover     { background-color: rgba(49, 176, 213, 0.3); }
.fka .yogg-saron:hover  { background-color: rgba(0, 255, 0,  0.1);   }
.fka .malygos:hover     { background-color: rgba(40, 96, 144, 0.8);  }
.fka .sartharion:hover  { background-color: rgba(201, 48, 44, 0.5);  }
.fka .anub-arak:hover   { background-color: rgba(40, 65, 91, 1);   }

.year {
  padding: 0 10px;
  display: inline;
}

.greyscale td img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 1s;
}

.greyscale:hover td img, .nograyscale td img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  transition: 1s;
}