html,
body {
    margin: 0px;
    padding: 0px;
}

#banner {
    position: absolute;
    width: 300px;
    height: 250px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    overflow: hidden;
}

.logo {
    position: absolute;
    width: 300px;
    height: 250px;
}

.image01_mask {
    position: absolute;
    width: 300px;
    height: 165px;
    overflow: hidden;
}
.image01 {
    position: absolute;
    width: 514px;
    height: 282px;
    -webkit-animation: image01 15s ease-in-out 1 both;
    animation: image01 15s ease-in-out 1 both;
}

.wheel_01 {
    position: absolute;
    width: 300px;
    height: 250px;
    -webkit-animation: wheel_01 15s ease 1 both;
    animation: wheel_01 15s ease 1 both;
}

.txt01 {
    position: absolute;
    width: 300px;
    height: 250px;
    -webkit-animation: txt01 15s ease 1 both;
    animation: txt01 15s ease 1 both;
}

.txt02 {
    position: absolute;
    width: 300px;
    height: 250px;
    -webkit-animation: txt02 15s ease 1 both;
    animation: txt02 15s ease 1 both;
}
.txt03 {
    position: absolute;
    width: 300px;
    height: 250px;
    -webkit-animation: txt03 15s ease 1 both;
    animation: txt03 15s ease 1 both;
}
.gradient {
    position: absolute;
    width: 300px;
    height: 250px;
    -webkit-animation: gradient 15s ease 1 both;
    animation: gradient 15s ease 1 both;
}
.german_technology {
    position: absolute;
    width: 300px;
    height: 250px;
    -webkit-animation: german_technology 15s ease 1 both;
    animation: german_technology 15s ease 1 both;
}

.cta {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 100px;
    height: 20px;
    background: #ffa800;
    background-image: url(../img/cta_txt.png);
    background-size: contain;
    -webkit-animation: cta 15s ease 1 both;
    animation: cta 15s ease 1 both;
    z-index: 9;
}

.cta_arrow {
    position: absolute;
    width: 100px;
    height: 20px;
    -webkit-animation: cta_arrow 15s ease 1 both;
    animation: cta_arrow 15s ease 1 both;
}

.repeatelement {
    position: absolute;
    top: 4px;
    left: 270px;
    -webkit-animation: repeatelement 15s ease 1 both;
    animation: repeatelement 15s ease 1 both;
}

#restartDisplayAD {
    position: absolute;
    width: 24px;
    height: 24px;
    padding: 0px;
    fill: rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

#restartDisplayAD:hover {
    position: absolute;
    transform: rotate(360deg);
    fill: #ffa800;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
@-webkit-keyframes gradient {

    0%,
    14% {
        opacity: 0;
        
    }

    18%,
    100% {
        opacity: 1;
    }
}

@keyframes gradient {

    0%,
    14% {
        opacity: 0;
        
    }

    18%,
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes image01 {

    0%,
    8% {
        -webkit-transform: translate(-23px, 32px) scale(1);
        
    }

    16%,
    100% {
        -webkit-transform: translate(0px, 0px) scale(1);
    }
}

@keyframes image01 {

    0%,
    8% {
        transform: translate(-194px, -7px) scale(1);
        
    }

    16%,
    100% {
        transform: translate(-106px, -58px) scale(0.6);
    }
}

@-webkit-keyframes txt01 {

    0%,
    35% {
        opacity: 1;
    }

    36%,
    100% {
        opacity: 0;
    }
}

@keyframes txt01 {

    0%,
    35% {
        opacity: 1;
    }

    36%,
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes txt02 {

    0%,
    15% {
        opacity: 0;
    }

    16%,
        35% {
        opacity: 1;
    }

    36%,
    100% {
        opacity: 0;
    }
}

@keyframes txt02 {

    0%,
    15% {
        opacity: 0;
    }

    16%,
        35% {
        opacity: 1;
    }

    36%,
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes txt03 {

    0%,
    36% {
        opacity: 0;
    }

    37%,
    100% {
        opacity: 1;
    }
}

@keyframes txt03 {

    0%,
    36% {
        opacity: 0;
    }

    37%,
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes german_technology {

    0%,
    36% {
        opacity: 0;
    }

    37%,
    100% {
        opacity: 1;
    }
}

@keyframes german_technology {

    0%,
    36% {
        opacity: 0;
    }

    37%,
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes wheel_01 {

    0%,
    37% {
        -webkit-transform: translate(-75px, 75px);
    }
    39%,
    100% {
        -webkit-transform: translate(15px, 0px);
    }
}

@keyframes wheel_01 {

    0%,
    37% {
        transform: translate(-75px, 75px);
    }
    39%,
    100% {
        transform: translate(15px, 0px);
    }
}

@-webkit-keyframes cta_arrow {

    0%,
    45% {
        -webkit-transform: translate(0px, 0px);
    }

    46% {
        -webkit-transform: translate(5px, 0px);
    }

    47% {
        -webkit-transform: translate(0px, 0px);
    }

    48% {
        -webkit-transform: translate(5px, 0px);
    }

    49%,
    100% {
        -webkit-transform: translate(0px, 0px);
    }
}

@keyframes cta_arrow {

    0%,
    45% {
        transform: translate(0px, 0px);
    }

    46% {
        transform: translate(5px, 0px);
    }

    47% {
        transform: translate(0px, 0px);
    }

    48% {
        transform: translate(5px, 0px);
    }

    49%,
    100% {
        transform: translate(0px, 0px);
    }
}

@-webkit-keyframes cta {

    0%,
    36% {
        opacity: 0;
        -webkit-transform: scale(1);
    }

    37%,
    51% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    52% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }

    53% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    54% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }

    55%,
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes cta {

    0%,
    36% {
        opacity: 0;
        transform: scale(1);
    }

    37%,
    51% {
        opacity: 1;
        transform: scale(1);
    }

    52% {
        opacity: 1;
        transform: scale(1.1);
    }

    53% {
        opacity: 1;
        transform: scale(1);
    }

    54% {
        opacity: 1;
        transform: scale(1.1);
    }

    55%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes repeatelement {

    0%,
    55% {
        opacity: 0;
        -webkit-transform: translate(0px, -50px);
    }

    58%,
    100% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
    }
}

@keyframes repeatelement {

    0%,
    55% {
        opacity: 0;
        transform: translate(0px, -50px);
    }

    58%,
    100% {
        opacity: 1;
        transform: translate(0px, 0px);
    }
}