#Baner6376 {
    width: 140px;
    height: 180px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
#Baner6376 .scene {
    width: 140px;
    height: 180px;
}

/*
=====
SCENE 1 (1,2)
=====
*/

#Baner6376[data-scene="0"] .scene1,
#Baner6376[data-scene="1"] .scene1 {
    display: block;
}
#Baner6376[data-scene="2"] .scene1,
#Baner6376[data-scene="3"] .scene1,
#Baner6376[data-scene="4"] .scene1,
#Baner6376[data-scene="5"] .scene1,
#Baner6376[data-scene="6"] .scene1 {
    display: none;
}

#Baner6376 .scene1 {
    background: #474747;
}
#Baner6376 .text_import {
    position: absolute;
    top: 5px;
    left: 8px;
}

#Baner6376 .logo {
    position: absolute;
    top: 35px;
    left: 4px;
}
#Baner6376 .text_verona {
    position: absolute;
    top: 105px;
    left: -140px;
}

#Baner6376 .text_tel {
    position: absolute;
    top: 128px;
    left: 140px;
}

#Baner6376 .text_www {
    position: absolute;
    top: 156px;
    left: 19px;
}

/* ===== Import */

#Baner6376[data-scene="0"] .text_import {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: importAnim .8s ease forwards .8s;
    animation: importAnim .8s ease forwards .8s;
}
@-webkit-keyframes importAnim {
    0% {
        -webkit-transform: scale(0);
    }
    80% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes importAnim {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

#Baner6376[data-scene="1"] .text_import {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation: importAnim_1 .8s ease forwards .2s;
    animation: importAnim_1 .8s ease forwards .2s;
}
@-webkit-keyframes importAnim_1 {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
    }
}
@keyframes importAnim_1 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}



/* ===== Logo */

#Baner6376[data-scene="0"] .logo {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: logoAnim .8s ease forwards;
    animation: logoAnim .8s ease forwards;
}
@-webkit-keyframes logoAnim {
    0% {
        -webkit-transform: scale(0);
    }
    80% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes logoAnim {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

#Baner6376[data-scene="1"] .logo {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation: logoAnim_1 .8s ease forwards;
    animation: logoAnim_1 .8s ease forwards;
}
@-webkit-keyframes logoAnim_1 {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
    }
}
@keyframes logoAnim_1 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

/* ===== Verona */

#Baner6376[data-scene="0"] .text_verona {
    -webkit-animation: veronaAnim .5s ease forwards .8s;
    animation: veronaAnim .5s ease forwards .8s;
}
@-webkit-keyframes veronaAnim {
    0% {
        left: -140px;
    }
    100% {
        left: 23px;
    }
}

@keyframes veronaAnim {
    0% {
        left: -140px;
    }
    100% {
        left: 23px;
    }
}


#Baner6376[data-scene="1"] .text_verona {
    left: 23px;
    -webkit-animation: veronaAnim_1 .5s ease forwards .2s;
    animation: veronaAnim_1 .5s ease forwards .2s;
}
@-webkit-keyframes veronaAnim_1 {
    0% {
        left: 23px;
    }
    100% {
        left: -140px;
    }
}

@keyframes veronaAnim_1 {
    0% {
        left: 23px;
    }
    100% {
        left: -140px;
    }
}

/* ===== Tel */

#Baner6376[data-scene="0"] .text_tel {
    -webkit-animation: telAnim .5s ease forwards 1.2s;
    animation: telAnim .5s ease forwards 1.2s;
}
@-webkit-keyframes telAnim {
    0% {
        left: 140px;
    }
    100% {
        left: 6px;
    }
}

@keyframes telAnim {
    0% {
        left: 140px;
    }
    100% {
        left: 6px;
    }
}

#Baner6376[data-scene="1"] .text_tel {
    left: 6px;
    -webkit-animation: telAnim_1 .5s ease forwards .4s;
    animation: telAnim_1 .5s ease forwards .4s;
}
@-webkit-keyframes telAnim_1 {
    0% {
        left: 6px;
    }
    100% {
        left: 140px;
    }
}

@keyframes telAnim_1 {
    0% {
        left: 6px;
    }
    100% {
        left: 140px;
    }
}

/* ===== Wwww */

#Baner6376[data-scene="0"] .text_www {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-animation: wwwAnim .8s ease forwards 1.4s;
    animation: wwwAnim .8s ease forwards 1.4s;
}
@-webkit-keyframes wwwAnim {
    0% {
        -webkit-transform: scale(0);
    }
    80% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes wwwAnim {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

#Baner6376[data-scene="1"] .text_www {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation: wwwAnim_1 .8s ease forwards .6s;
    animation: wwwAnim_1 .8s ease forwards .6s;
}
@-webkit-keyframes wwwAnim_1 {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0);
    }
}
@keyframes wwwAnim_1 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}



/*
=====
SCENE 2 (3)
=====
*/


#Baner6376[data-scene="0"] .scene2,
#Baner6376[data-scene="1"] .scene2 {
    display: none;
}
#Baner6376[data-scene="2"] .scene2 {
    display: block;
}
#Baner6376[data-scene="3"] .scene2,
#Baner6376[data-scene="4"] .scene2,
#Baner6376[data-scene="5"] .scene2,
#Baner6376[data-scene="6"] .scene2 {
    display: none;
}

#Baner6376 .img1 {
    position: absolute;
    top: 0;
    right: -81px;
}

#Baner6376[data-scene="2"] .img1 {
    right: 0;
    -webkit-animation: img1Anim 2.5s linear forwards;
    animation: img1Anim 2.5s linear forwards;
}
@-webkit-keyframes img1Anim {
    0% {
        right: 0px;
    }
    100% {
        right: -81px;
    }
}
@keyframes img1Anim {
    0% {
        right: 0px;
    }
    100% {
        right: -81px;
    }
}


#Baner6376 .sonder {
    position: absolute;
    top: 50px;
    left: 9px;
    z-index: 1;
}
#Baner6376[data-scene="2"] .sonder {
    opacity: 0;
    -webkit-animation: sonderAnim 2.5s ease forwards;
    animation: sonderAnim 2.5s ease forwards;
}
@-webkit-keyframes sonderAnim {
    0% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes sonderAnim {
    0% {
        transform: scale(2) rotate(-25deg);
        opacity: 0;
        filter: blur(7px);
        animation-timing-function: ease-in;
    }
    25% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
    50% {
        transform: scale(.8) rotate(10deg);
        opacity: 1;
        filter: blur(0px);
    }
    75% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(2) rotate(-25deg);
        opacity: 0;
        filter: blur(7px);
    }
}

#Baner6376 .text_www2 {
    position: absolute;
    bottom: -25px;
    left: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
}

#Baner6376[data-scene="2"] .text_www2 {
    -webkit-animation: text_www2Anim .3s ease forwards;
    animation: text_www2Anim .3s ease forwards;
}
@-webkit-keyframes text_www2Anim {
    0% {
        bottom: -25px;
    }
    100% {
        bottom: 0px;
    }
}
@keyframes text_www2Anim {
    0% {
        bottom: -25px;
    }
    100% {
        bottom: 0px;
    }
}




/*
=====
SCENE 3 (3)
=====
*/


#Baner6376[data-scene="0"] .scene3,
#Baner6376[data-scene="1"] .scene3,
#Baner6376[data-scene="2"] .scene3 {
    display: none;
}
#Baner6376[data-scene="3"] .scene3 {
    display: block;
}
#Baner6376[data-scene="4"] .scene3,
#Baner6376[data-scene="5"] .scene3,
#Baner6376[data-scene="6"] .scene3 {
    display: none;
}

#Baner6376 .img2 {
    position: absolute;
    top: 0;
    right: -81px;
}

#Baner6376[data-scene="3"] .img2 {
    left: 0;
    -webkit-animation: img1Anim 2.5s linear forwards;
    animation: img1Anim 2.5s linear forwards;
}
@-webkit-keyframes img1Anim {
    0% {
        left: 0px;
    }
    100% {
        left: -81px;
    }
}
@keyframes img1Anim {
    0% {
        left: 0px;
    }
    100% {
        left: -81px;
    }
}


#Baner6376 .toppreis {
    position: absolute;
    top: 50px;
    left: 29px;
    z-index: 1;
}
#Baner6376[data-scene="3"] .toppreis {
    opacity: 0;
    -webkit-animation: toppreisAnim 2.5s ease forwards;
    animation: toppreisAnim 2.5s ease forwards;
}
@-webkit-keyframes toppreisAnim {
    0% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes toppreisAnim {
    0% {
        transform: scale(2) rotate(25deg);
        opacity: 0;
        filter: blur(7px);
        animation-timing-function: ease-in;
    }
    25% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
    50% {
        transform: scale(.8) rotate(-10deg);
        opacity: 1;
        filter: blur(0px);
    }
    75% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(2) rotate(25deg);
        opacity: 0;
        filter: blur(7px);
    }
}

#Baner6376 .text_www3 {
    position: absolute;
    left: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
}

#Baner6376[data-scene="3"] .text_www3 {
    top: -25px;
    -webkit-animation: text_www3Anim .3s ease forwards;
    animation: text_www3Anim .3s ease forwards;
}
@-webkit-keyframes text_www3Anim {
    0% {
        top: -25px;
    }
    100% {
        top: 0px;
    }
}
@keyframes text_www3Anim {
    0% {
        top: -25px;
    }
    100% {
        top: 0px;
    }
}














/*
=====
SCENE 2 (3)
=====
*/


#Baner6376[data-scene="0"] .scene4,
#Baner6376[data-scene="1"] .scene4,
#Baner6376[data-scene="2"] .scene4,
#Baner6376[data-scene="3"] .scene4 {
    display: none;
}
#Baner6376[data-scene="4"] .scene4 {
    display: block;
}
#Baner6376[data-scene="5"] .scene4,
#Baner6376[data-scene="6"] .scene4 {
    display: none;
}

#Baner6376 .img3 {
    position: absolute;
    top: 0;
    right: -81px;
}

#Baner6376[data-scene="4"] .img3 {
    right: 0;
    -webkit-animation: img3Anim 2.5s linear forwards;
    animation: img3Anim 2.5s linear forwards;
}
@-webkit-keyframes img3Anim {
    0% {
        right: 0px;
    }
    100% {
        right: -81px;
    }
}
@keyframes img3Anim {
    0% {
        right: 0px;
    }
    100% {
        right: -81px;
    }
}


#Baner6376 .primazustand {
    position: absolute;
    top: 50px;
    left: 9px;
    z-index: 1;
}
#Baner6376[data-scene="4"] .primazustand {
    opacity: 0;
    -webkit-animation: primazustandAnim 2.5s ease forwards;
    animation: primazustandAnim 2.5s ease forwards;
}
@-webkit-keyframes primazustandAnim {
    0% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes primazustandAnim {
    0% {
        transform: scale(2) rotate(-25deg);
        opacity: 0;
        filter: blur(7px);
        animation-timing-function: ease-in;
    }
    25% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
    }
    50% {
        transform: scale(.8) rotate(10deg);
        opacity: 1;
        filter: blur(0px);
    }
    75% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(2) rotate(-25deg);
        opacity: 0;
        filter: blur(7px);
    }
}

#Baner6376 .text_www4 {
    position: absolute;
    bottom: -25px;
    left: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.75);
}

#Baner6376[data-scene="4"] .text_www4 {
    -webkit-animation: text_www4Anim .3s ease forwards;
    animation: text_www4Anim .3s ease forwards;
}
@-webkit-keyframes text_www4Anim {
    0% {
        bottom: -25px;
    }
    100% {
        bottom: 0px;
    }
}
@keyframes text_www4Anim {
    0% {
        bottom: -25px;
    }
    100% {
        bottom: 0px;
    }
}