@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot');
  src:  url('fonts/icomoon.eot#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf') format('truetype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ratte:before {
  content: "\1f400";
}
.icon-stier:before {
  content: "\1f402";
}
.icon-schwan:before {
  content: "\1f415";
}
.icon-wolf:before {
  content: "\1f43a";
}
.icon-rabe:before {
  content: "\1f413";
}
.icon-widder:before {
  content: "\e905";
}
.icon-krokodil:before {
  content: "\1f40a";
}
.icon-frosch:before {
  content: "\1f438";
}
.icon-drache:before {
  content: "\1f409";
}
.icon-baer:before {
  content: "\1f43b";
}
.icon-taube:before {
  content: "\1f414";
}
.icon-pferd:before {
  content: "\1f40e";
}
.icon-papagei:before {
  content: "\1f424";
}
.icon-pfau:before {
  content: "\1f425";
}
.icon-hund:before {
  content: "\1f436";
}
.icon-papier:before {
  content: "\1f4dc";
}

.icongroup{
  display: inline-block;
  position: relative;
  margin-right: 20px;
}

.icongroup .icon{
  font-size: 40px;
  color: #aa9173;
  line-height: 1.2;
  display: inline-block;
  position: relative;
  transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: oopacity 0.2s ease-in-out;
}

.icongroup:hover .icon {
    opacity: 0.5;
}

.icongroup:hover .icon:hover {
    opacity: 1;
}

.icongroup.has-tooltip .tooltip{
  top: 50%;
  margin-top: 0.5em;
  padding: 0 5px;
}

.icongroup.has-tooltip:hover .icon{
  opacity: 1;
}

.icongroup-headline{
  margin-bottom: 0.3em;
  font-weight: bold;
}

.tooltip{
  display: block;
  opacity: 0;
  z-index: 1;
  position: absolute;
  left: 50%;
  margin-top: -0.5em;
  transform: translateX(-50%);
  text-align: center;
  background-color: #363636;
  color: #fff;
  padding: 5px 10px;
  border-radius: 2px;
  font-size: 16px;
  font-family: 'FAZ Gold Sans', Helvetica, Arial, sans-serif;
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: oopacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.has-tooltip:hover .tooltip{
  opacity: 1;
}

.lohengrin.icon, .lohengrin.icongroup .icon{
  color: #c49d82;
}

.tannhauser.icon, .tannhauser.icongroup .icon{
  color: #e6b683;
}

.parsifal.icon, .parsifal.icongroup .icon{
  color: #f69347;
}

.ring.icon, .ring.icongroup .icon{
  color: #396a6f;
}

.siegfried.icon, .siegfried.icongroup .icon{
  color: #4f929b;
}

.walkure.icon, .walkure.icongroup .icon{
  color: #396a6f;
}

.rheingold.icon, .rheingold.icongroup .icon{
  color: #234a50;
}
@media screen and (max-width: 680px) {
  .icongroup .icon{
    font-size: 7vw;
  }
}