/*
@font-face {
  font-family: 'OpenSans-Regular';
  src: url("font/Open_Sans/OpenSans-Regular.ttf");
  font-weight: normal;
  font-style: normal; 
 }



 @font-face {
  font-family: 'OpenSans-Semibold';
  src: url("font/Open_Sans/OpenSans-Semibold.ttf");
  font-weight: normal;
  font-style: normal; 
 }

*/
.verlauf {
  position: absolute;
  /*top: 10%;*/
  top: 44%;
  left: 42%;
  width: 16%;
  background-image: url("../verlauf.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 5;
  height: 39%; }

.tropfen {
  position: absolute;
  left: 50%;
  top: 10%;
  height: 20px;
  width: 20px;
  opacity: 1;
  background-image: url(../tropfen1.svg);
  background-size: 21px; }

.tropfen1 {
  left: 48%;
  top: 11%;
  background-image: url(../tropfen1.svg); }

.tropfen2 {
  left: 49%;
  top: 12%;
  background-image: url(../tropfen2.svg); }

.tropfen3 {
  left: 51%;
  top: 10%;
  background-image: url(../tropfen3.svg); }

.tropfenNachUnten {
  top: 40% !important;
  opacity: 0;
  transition: all 5.1s linear; }

#pupilleft,
#pupilright,
#dogpupilleft,
#dogpupilright {
  position: relative;
  background: #000000;
  border-radius: 50%;
  z-index: 1000; }

#eyeleft,
#eyeright,
#dogeyeleft,
#dogeyeright {
  position: absolute;
  background: #FFFFFF;
  overflow: hidden;
  border-radius: 50%; }

#pupilleft {
  width: 18px;
  height: 18px; }

#eyeleft {
  width: 135px;
  height: 135px;
  left: 313px;
  top: 72px; }

#pupilright {
  width: 18px;
  height: 18px; }

#eyeright {
  width: 35px;
  height: 35px;
  left: 268px;
  top: 75px; }

#pupilleft, #pupilright {
  width: 40%;
  height: 40%; }

#eyeleft, #eyeright {
  width: 4%;
  height: 19%;
  left: 44%;
  top: 71%;
  background: none; }

#eyeright {
  left: 52%; }

.logoImg {
  z-index: 100;
  position: relative; }