.dummy{
    color:#155738;
    color:#20784e;
    color:#f6ff8c;
    color:#eaff00;
    color:#b8b625;
}

@font-face {
    font-family: "myriad-cond";
    src:url("./MYRIADPRO-COND.woff") format('woff');
}

a, a:visited, a:hover{
    color:inherit;
    text-decoration: inherit;
}

.frame{
    position:absolute;
    top:0px;
    left:0px;
    width:250px;
    height:250px;
    background-image: linear-gradient(-45deg, #155738, #155738, #20784e, #155738, #155738);
    background-size:200%;
    overflow:hidden;
    animation:bg-wobble alternate 4s ease infinite;
    box-shadow:inset 0 -10px 50px #000000bd;
}

.starter{
    display:block;
    position:absolute;  
    top:40px;
    left:13px;
    font-family:myriad-cond;
    font-size:3.5em;
    font-weight:600;
    line-height:0.8em;
    color:#eaff00;
    text-shadow:3px 3px 9px #000000a1;
    z-index:1000;
}
.gesund, .durch, .den, .winter{
    display:inline-block;
}
.gesund{
    animation:infinite knock 30s ease;
}
.durch{
    animation:infinite down 30s ease;
}
.den{
    margin-left:10px;
    animation:infinite the 30s ease;
}
.winter{
    animation:infinite lock 30s ease;
}


.circle{
    width:106px;
    height: 250px;
    background-image:url(./right.png);
    background-size:cover;
    animation:infinite circle 30s ease;
    position:absolute;
    right:0px;
}
.logo{
    position:absolute;
    top:0px;
    right:-10px;
    background-image:url(./logo.png);
    background-repeat:no-repeat;
    background-size:90%;
    width:120px;
    height:50px;
    animation:infinite logo 30s ease;
    filter:drop-shadow(3px 3px 6px #000);
}
h1{
    position:absolute;
    top:30px;
    left:13px;
    font-family:myriad-cond;
    /*color:#eaff00;*/
    color:white;
    margin-top:0px;
    text-shadow:3px 3px 9px #000000a1;
    animation:infinite heading 30s ease;
    font-size:2.5em;
}
h1 span{
    font-size:0.7em;
}
.text{
    font-family:myriad-cond;
    font-weight:600;
    font-size:2.2em;
    color:#eaff00;
    position:absolute;
    z-index:1000;
    left:13px;
    top:75px;
    animation:infinite text 30s ease;
}
.text span{
    font-size:16px;
    font-weight:100;
    letter-spacing:0.5px;
    line-height:0.8em;
    float:left;
    font-size:0.9em;
}
.fcd{
    position:absolute;
    right:-5px;
    bottom:5px;
    width:140px;
    height:140px;
    background-image:url(./fcd.png);
    background-position:-15px 0px;
    background-size:cover;
    transform:scaleX(-1);
    animation:infinite fcd 30s ease;
}
.techno{
    position:absolute;
    width:200px;
    height:50px;
    bottom:0px;
    left:5px;
    background-image:url(./techno.png);
    background-size:cover;
    filter:drop-shadow(3px 3px 9px #000000)
    drop-shadow(6px 6px 20px #000);
    z-index:1;
    animation:infinite techno 30s ease;
}

@keyframes bg-wobble{
    0%{background-position:0px}
    100%{background-position:-250px}
}
@keyframes techno{
    0%{
        left:23px;
    }
    19%{
        left:23px;
    }
    24%{
        left:5px;
    }
    97%{
        left:5px;
    }
    100%{
        left:23px;
    }
}
@keyframes fcd {
    0%{
        opacity:0;
        bottom:-250px;
        transform:scale(-1, 1) translate(0px, 0px);
    }
    19%{
        opacity:0;
          bottom:-250px;
    }
    21%{
        opacity:1;
    }
    22%{
        opacity:1;
        bottom:5px;
        
    }
    97%{
        opacity:1;
    }
    99.9%{
        opacity:0;
        
        transform:scale(-1.3, 1.3) translate(10px, -10px);
        
    }
}

@keyframes logo {
    0%{
        opacity:0;
        right:-100px;
    }
    21%{
        opacity:0;
        right:-100px;
    }
    23%{
        opacity:1;
    }
    25%{
        opacity:1;
        right:-5px;
    }
    97%{
        opacity:1;
    }
    99.9%{
        opacity:0;
        right:-5px;
    }
}

@keyframes circle {
    0%{
        opacity:0;
        right:-150px;
    }
    19%{
        opacity:0;
        right:-150px;
    }
    24%{
        opacity:1;
    }
    29%{
        opacity:1;
        right:0px;
    }
    97%{
        opacity:1;
    }
    99.9%{
        opacity:0;
        right:0px;
    }
}

@keyframes heading {
    0%{
        opacity:0;
        left:-300px;
    }
    21%{
        opacity:0;
        left:-300px;
    }
    23%{
        opacity:1;
    }
    25%{
        opacity:1;
        left:13px;
    }
    97%{
        opacity:1;
    }
    99.9%{
        opacity:0;
        left:13px;
    }
}

@keyframes text {
    0%{
        opacity:0;
        left:-300px;
    }
    22%{
        opacity:0;
        left:-300px;
    }
    24%{
        opacity:1;
    }
    26%{
        opacity:1;
        left:13px;
    }
    97%{
        opacity:1;
    }
    99.9%{
        opacity:0;
        left:13px;
    }
}


@keyframes knock{
    0%{
        opacity:1;
        transform:scale(7);
    }
    1%{
        opacity:1;
        transform:scale(1);
    }
    18%{
        opacity:1;
    }
    20%{
       
       transform:scale(1);
        opacity:0;
    }
    99.9%{
        transform:scale(7);
        opacity:0;
    }
}

@keyframes down{
    0%{
        opacity:0;
    }
    1.999%{
        opacity:0;
    }
    2%{
        opacity:1;
        transform:scale(7);
    }
    3%{
        opacity:1;
        transform:scale(1);
    }
    18%{
        opacity:1;
    }
    20%{
       
       transform:scale(1);
        opacity:0;
    }
    99.9%{
        transform:scale(7);
        opacity:0;
    }
}
@keyframes the{
    0%{
        opacity:0;
    }
    3.9%{
        opacity:0;
    }
    4%{
        opacity:1;
        transform:scale(7);
    }
    5%{
        opacity:1;
        transform:scale(1);
    }
    18%{
        opacity:1;
    }
    20%{
       
       transform:scale(1);
        opacity:0;
    }
    99.9%{
        transform:scale(7);
        opacity:0;
    }
}
@keyframes lock{
    0%{
        opacity:0;
    }
    6.4%{
        opacity:0;
    }
    6.5%{
        opacity:1;
        transform:scale(7);
    }
    7.5%{
        opacity:1;
        transform:scale(1);
    }
    18%{
        opacity:1;
    }
    20%{
       
       transform:scale(1);
        opacity:0;
    }
    99.9%{
        transform:scale(7);
        opacity:0;
    }
}