body, html{
  padding:0;
  margin:0;
  font-family: houschka-rounded, sans-serif;
  color:#111336;
  font-weight:400;
  background-color:#f2f2f2;
  line-height:2;
}
h1 {
  font-size:30px;
  margin:20px 0 10px 0;
}
p, a {
  text-decoration: none;
  color:##111336;
  margin:0;
  font-size:20px;
  padding:0;
}
a {
  color:#666;
}
a:hover {
  color:#111336;
}
h4  {
  margin-bottom:5px;
}
ul.links {
  margin:20px 0 0 0;
  padding:0;
}
ul.links li{
  text-decoration: none;
  display:inline-block;
  margin-right:15px;
  list-style-type: none;
}
.wrapper {

  width:100%;
  height:100%;
}
.clear{
  clear:both;
}
.farn {
  background-color:#0f0;
  padding:0 12px;
  color:black;
  border-radius: 9999px;
  font-weight: bold;
  letter-spacing: 1px;
  margin:0 5px 0 5px;
}
.farn:hover {
  background-color:#fff;
  color:#0f0;
}
.container {
  width:60%;
  margin-top:5%;
  margin-bottom:5%;
}
.foto {

}
.foto img {
  width:100%;
  border-radius: 9999px;
}
.head {
  margin:0 auto;
}
.head .inhalt {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  position: relative;
}

.head .inhalt:after {
  content: "";
  display: block;
  padding-bottom:100%;
}
.impressum {

}
.imp {
  position: fixed;
  bottom:5px;
  left:15px;
  color:#888;
  display: block;
}

.circle {
  width:100%;
  background-image: url(images/r-08.svg);
  position: absolute;
  background-size:contain;
}

.circle::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.inhalt div {
    background-size:contain;
    background-repeat: no-repeat;
    width:100%;
    position: absolute;
}
.inhalt div::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.textcontent{
  margin-top:10%;
}
.impressum .textcontent{
  margin-top:0%;
}



/*-------------------------AUGEN------------------------ */
#augen {
  background-image: url('images/r-06.svg');
  -webkit-animation: augen 8s ease infinite; /* Safari 4+ */
  -moz-animation:    augen 8s ease infinite; /* Fx 5+ */
  -o-animation:      augen 8s ease infinite; /* Opera 12+ */
  animation:         augen 8s ease infinite; /* IE 10+, Fx 29+ */
}
@keyframes augen {
  0%, 12.5%, 50%, 62.5%, 100%	{
          left:0%;
          }
  25%, 37.5% {
          left:2%;
          }
  75%, 87.5% {
          left:-2%;
          }
}

/*-------------------------BRILLE------------------------ */
#brille {
  background-image: url('images/r-04.svg');
  -webkit-animation: brille 8s ease infinite; /* Safari 4+ */
  -moz-animation:    brille 8s ease infinite; /* Fx 5+ */
  -o-animation:      brille 8s ease infinite; /* Opera 12+ */
  animation:         brille 8s ease infinite; /* IE 10+, Fx 29+ */
}
@keyframes brille {
  0%, 12.5%, 50%, 62.5%, 100%	{
          left:0%;
          }
  25%, 37.5% {
          left:1%;
          }
  75%, 87.5% {
          left:-1%;
          }
}

/*-------------------------MUND------------------------ */
#mund {
  background-image: url('images/r-05.svg');
  -webkit-animation: mund 8s ease infinite; /* Safari 4+ */
  -moz-animation:    mund 8s ease infinite; /* Fx 5+ */
  -o-animation:      mund 8s ease infinite; /* Opera 12+ */
  animation:         mund 8s ease infinite; /* IE 10+, Fx 29+ */
}
@keyframes mund {
  0%, 12.5%, 50%, 62.5%, 100%	{
          left:0%;
          }
  25%, 37.5% {
          left:0.5%;
          }
  75%, 87.5% {
          left:-0.5%;
          }
}

/*-------------------------LOCKE------------------------ */
#locke {
  background-image: url('images/r-03.svg');
  -webkit-animation: locke 8s ease infinite; /* Safari 4+ */
  -moz-animation:    locke 8s ease infinite; /* Fx 5+ */
  -o-animation:      locke 8s ease infinite; /* Opera 12+ */
  animation:         locke 8s ease infinite; /* IE 10+, Fx 29+ */
}
@keyframes locke {
  0%, 12.5%, 50%, 62.5%, 100%	{
          left:0%;
          }
  25%, 37.5% {
          left:0.5%;
          }
  75%, 87.5% {
          left:-0.5%;
          }
}

/*-------------------------KOPF------------------------ */
#kopf {
  background-image: url('images/r-01.svg');
  -webkit-animation: kopf 8s ease infinite; /* Safari 4+ */
  -moz-animation:    kopf 8s ease infinite; /* Fx 5+ */
  -o-animation:      kopf 8s ease infinite; /* Opera 12+ */
  animation:         kopf 8s ease infinite; /* IE 10+, Fx 29+ */
}
@keyframes kopf {
  0%, 12.5%, 50%, 62.5%, 100%	{
          left:0%;
          }
  25%, 37.5% {
          left:0%;
          }
  75%, 87.5% {
          left:0%;
          }
}

/*-------------------------HAARE------------------------ */
#haare {
  background-image: url('images/r-02.svg');
  -webkit-animation: haare 8s ease infinite; /* Safari 4+ */
  -moz-animation:    haare 8s ease infinite; /* Fx 5+ */
  -o-animation:      haare 8s ease infinite; /* Opera 12+ */
  animation:         haare 8s ease infinite; /* IE 10+, Fx 29+ */
}
@keyframes haare {
  0%, 12.5%, 50%, 62.5%, 100%	{
          left:0%;
          }
  25%, 37.5% {
          left:-0.5%;
          }
  75%, 87.5% {
          left:0.5%;
          }
}

@media only screen and (max-width: 992px) {
    .imp {
      position: relative;
      margin-top:80px;
      bottom:0px;
      left:0px;
    }

}
@media only screen and (max-width: 768px) {
    .textcontent{
      margin-top:0%;
    }
    .container {
      width:100%;
    }
}