.header {
    /*background-image: url("/eforwarding/javax.faces.resource/img/Seefracht3_large_neu.jpg");
    background-size: 100%;
    background-repeat: no-repeat;*/
    /*height: 100vh;*/
    width: 100%;
    background-color: transparent;
}

.header .ui-button {
    color: white !important;
    font-weight: bold;
    font-size: 1.3em !important;
}

.header {
    position: relative;
}

.header-image {
    height: 100vh;
    background-color: black;
    overflow: hidden;
}

.header-image > video, .header-image > img {
    position: relative;
    top: 50%;
    transform: translateY(-55%);
    height: 100%;
    width: auto;
    /*animation-name: example;
    animation-duration: 4s;
    //animation-iteration-count: infinite;
    animation-timing-function: linear;*/

}

@media only screen and (max-width: 641px) {
    .header {
        height: 100vh;
        background-color: black;
    }

    .header-image {
    /*height: 50vh;*/
    }

    .header-image video, .header-image img {
    /*top: 100%;
    transform: translateY(-50%);*/

    }
}

.header-image > video, .header-image > img {
    animation-name: example1;
}

.header-image > img {
    animation-name: example3;
    animation-timing-function: ease;
    animation-duration: 7s;

    height: 100%;
    width: auto;
}

@media screen and (min-aspect-ratio: 5/3) {
    .slideshow-container .slide img {
        height: auto;
        width: 100%;
    }

    .header-image > video, .header-image > img {
        height: auto;
        width: 100%;
    }
}

@keyframes example1 {
    from {transform: translateY(20%);}
    to {transform: translateY(-55%);}
}

@keyframes example2 {
    from {transform: translate(100%,-55%);}
    to {transform: translate(0,-55%);}
}

@keyframes example3 {
    from {opacity: 0;}
    to {opacity: 1;}
}