* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

body {
    
    
}

main {
    height: 100vh;
    background-color: black;
}

img {
    
    display: inline-block;
}

img.mobile {
    display: none;
}

@media only screen and (max-width: 31.25rem){
    img.mobile {
        display: inline-block;
    }
    img.desktop {
        display: none;
    }
}

main>video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: fill;
    opacity: .5;
}

@media only screen and (max-width: 31.25rem){
    main>video {
        display: none;
    }
}

main.akt1 {
    background-color: #2a2b7c;
    transition: background-color 6s;
}

main.akt2 {
    background-color: #ded5c8;
    transition: background-color 6s;
}

div#akt1, div#akt2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div#akt1 {
    width: 50%;
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

div#akt2 {
    width: 50%;
    max-width: 1000px;
    margin: auto;
    text-align: center;
    overflow: hidden;
}

@media only screen and (max-width: 31.25rem){
    div#akt2 {
        width: 90%;
    }
}

*.hidden {
    opacity: 0;
    transition: opacity 2s;
}

*.visible {
    transition: opacity 3s;
    opacity: 1!important;
}

svg>g, svg>path {
    display: inline-block;
    opacity: 0;
    
}

div#rede {
    width: 100%;
    max-width: 1000px;
    margin-bottom: 3rem;
    opacity: 0;
    
}
div#cicero {
    width: 100%;
    //max-width: 66px;
    opacity: 0;
    text-align: center;
}
div#cicero img {
    max-width: 66px;
}

img#bird {
    width: 30px;
    height: auto;
    position: absolute;
    right: 150%;
    top: 100%;
    opacity: 1;
    
}

path#vogel {

}
path#vogel.visible {
    opacity: 1;
    transition: opacity .5s;

}