@charset "UTF-8";
/* CSS Document */
/* Zeitstrahl*/

#quadrat-eins-kl,
#quadrat-fuenf-kl,
#quadrat-sechs-kl {
    cursor: pointer;
}
#quadrat-eins-kl:hover .eins-uhr,
#quadrat-fuenf-kl:hover .fuenf-uhr,
#quadrat-sechs-kl:hover .sechs-uhr,
#quadrat-eins-gr:hover .eins-uhr-gr,
#quadrat-fuenf-gr:hover .fuenf-uhr-gr,
#quadrat-sechs-gr:hover .sechs-uhr-gr {
    opacity: 1;
    transition: opacity 0.5s;
}
.sechs-uhr,
.fuenf-uhr,
.eins-uhr,
.sechs-uhr-gr,
.fuenf-uhr-gr,
.eins-uhr-gr {
    opacity: 0;
}
.sechs-uhr-gr,
.fuenf-uhr-gr,
.eins-uhr-gr {
    font-size: 33px;
}
/* Animation */
.header-home {
    margin: -2px -15px 0 -15px;
}
.header-blau {
    background: #29ABE2;
    min-height: 200px;
    margin-top: -8px;
}
#ohr_rechts {
    animation: winken 3s infinite;   
    -webkit-transform-origin:  bottom left;
    -moz-transform-origin:  bottom left;
    -ms-transform-origin:  bottom left;
    -o-transform-origin:  bottom left;
    transform-origin:  bottom left;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-animation-delay:  0.2s;
    -o-animation-delay:  0.2s;
    animation-delay:  0.2s;
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

#ohr_links {
    animation: winken 3s infinite;   
    -webkit-transform-origin:  bottom right;
    -moz-transform-origin:  bottom right;
    -ms-transform-origin:  bottom right;
    -o-transform-origin:  bottom right;
    transform-origin:  bottom right;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
    -webkit-animation-delay:  0.4s;
    -o-animation-delay:  0.4s;
    animation-delay:  0.4s;
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes winken {
  0%   {-webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg); }
  50%  {-webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  transform: rotate(20deg); }
  100% {-webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg); }
}
#handyarm {
    animation: winken 3s infinite;
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin:  bottom left;
    -ms-transform-origin:  bottom left;
    -o-transform-origin:  bottom left;
    transform-origin:  bottom left;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
#hut{
    animation: hut 2s infinite;
    -webkit-transform-origin:  top center;
    -moz-transform-origin:  top center;
    -ms-transform-origin:  top center;
    -o-transform-origin:  top center;
    transform-origin:  top center;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
@keyframes hut {
  0%   {-webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform:rotate(0deg);
  transform: rotate(0deg);}
  25%  {-webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg) ;}
  50% { -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);}
}
#blubber1 {
  animation: blubber 1.5s infinite;
  -webkit-animation-delay: 0.45s;
  -o-animation-delay: 0.45s;
  animation-delay: 0.45s;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;}
#blubber2 {
  animation: blubber 1.5s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
#blubber3 {
  animation: blubber 1.5s infinite;
  -webkit-animation-delay: 0.20s;    
  -o-animation-delay: 0.20s;    
  animation-delay: 0.20s;    
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
#blubber4 {
  animation: blubber 1.5s infinite;
  -webkit-animation-delay: 0.85s;
  -o-animation-delay: 0.85s;
  animation-delay: 0.85s;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
@keyframes blubber {
    100% {
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -o-transform: translateY(-100px);
        transform: translateY(-100px);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        -ms-opacity: 0;
        -o-opacity: 0;
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}
#note {
      animation: note 3s infinite;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;}
@keyframes note {
   50% {
        -webkit-transform: translateY(-15px) rotate(8deg);
        -ms-transform: translateY(-15px) rotate(8deg);
        -o-transform: translateY(-15px) rotate(8deg);
        transform: translateY(-15px) rotate(8deg);
        -webkit-animation-timing-function: ease;
        -o-animation-timing-function: ease;
        animation-timing-function: ease;
    }
}
#igelarm {
    animation: winken 8s infinite;
    -webkit-transform-origin:  top left;
    -moz-transform-origin:  top left ;
    -ms-transform-origin:  top left ;
    -o-transform-origin:  top left ;
    transform-origin:  top left ;
    -webkit-transform-box: fill-box;
    -moz-transform-box: fill-box;
    -ms-transform-box: fill-box;
    -o-transform-box: fill-box;
    transform-box: fill-box;
}
#lasso path { 
    stroke-dasharray: 1605.957275390625;   
    stroke-dashoffset: 1605.957275390625;   
    fill:none; 
    animation: dash 3s linear forwards; 
    -webkit-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
} 

@keyframes dash {   
    to {     
        -webkit-stroke-dashoffset: 0;
        -moz-stroke-dashoffset: 0;
        -ms-stroke-dashoffset: 0;
        -o-stroke-dashoffset: 0;
        stroke-dashoffset: 0;   
    } 
}
#zahl_x5F_mit_x5F_tropfen { 
    animation: zwobble 4s linear infinite; 
}
@-webkit-keyframes zwobble  {
  0%  { 
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  50%  { 
    -webkit-transform: rotate(0.8deg);
      -ms-transform: rotate(0.8deg);
      -o-transform: rotate(0.8deg);
      transform: rotate(0.8deg);
    }
  100%  { 
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
}
#hintergrund_x5F_1 {
    animation: zwabble 4s linear infinite; 
}
@-webkit-keyframes zwabble  {
  0%  { 
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  50%  { 
      -webkit-transform: rotate(-0.5deg);
      -ms-transform: rotate(-0.5deg);
      -o-transform: rotate(-0.5deg);
      transform: rotate(-0.5deg);
    }
  100%  { 
    -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
}