.lettercontainer
{
  display:inline-block;
}
.letter
{
  display:inline-block;
  width:42px;
  height:42px;
  position: relative;
  transform:rotate(-16deg);
  border:1px solid #e9e9e9;
  color:#e9e9e9;
  transition:0.5s ease all;
  cursor:default;
}
.lettercontainer.active .letter
{
  color:#b81625;
  cursor:pointer;
}
.lettercontainer.active .letter.active,
.lettercontainer.active .letter:hover
{
  background:#b81625;
  color:white;
  border:1px solid #b81625;
}
.letter > span
{
  position: absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%) rotate(16deg);
  font-size:28px;
  font-weight:bold;
}
.glossarLetter
{
  font-size:100px;
  line-height:100px;
  font-weight:bold;
  color:#b81625;
  display:block;
}
.glossarItem .relative a
{
  position: absolute;
  right:0;
  bottom:0;
  color:#b81625;
  border:1px solid #dfdfdf;
  padding:13px 11px 10px 12px;
}
.glossarItem .relative a:hover
{
  text-decoration: none;
}