#Baner3642 {
    width: 140px;
    height: 180px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: red;
}

#Baner3642 .scene {
    width: 140px;
    height: 180px;
}

#Baner3642 .textContainer0 {
    width: 300px;
    height: 75px;
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -moz-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    -o-transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    transform: translateY(-50%) translateX(-50%) rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
}

#Baner3642 .textContainer0 .line {
    width: 0%;
    height: 75px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

#Baner3642 .textContainer0 .text0 {
    display: block;
    margin: 15px auto;
    position: relative;
    z-index: 1;
    opacity: 0;
}

#Baner3642 .textContainer123 {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    background: rgba(255, 255, 255, 0);
}
#Baner3642[data-scene="1"] .textContainer123,
#Baner3642[data-scene="2"] .textContainer123,
#Baner3642[data-scene="3"] .textContainer123,
#Baner3642[data-scene="4"] .textContainer123 {
    background: rgba(255, 255, 255, 0.5);
    -webkit-transition: background 1s cubic-bezier(0.12, 0.49, 0, 1);
    -moz-transition: background 1s cubic-bezier(0.12, 0.49, 0, 1);
    -o-transition: background 1s cubic-bezier(0.12, 0.49, 0, 1);
    transition: background 1s cubic-bezier(0.12, 0.49, 0, 1);
}

#Baner3642 .text1,
#Baner3642 .text2,
#Baner3642 .text3 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin-left: -100%;
    z-index: 10;
}

#Baner3642[data-scene="0"] .textContainer0 .line {
    width: 100%;
    -webkit-transition: all 1.5s cubic-bezier(0.12, 0.49, 0, 1);
    -moz-transition: all 1.5s cubic-bezier(0.12, 0.49, 0, 1);
    -o-transition: all 1.5s cubic-bezier(0.12, 0.49, 0, 1);
    transition: all 1.5s cubic-bezier(0.12, 0.49, 0, 1);
}

#Baner3642[data-scene="0"] .textContainer0 .text0 {
    opacity: 1;
    -webkit-transition: all 1s cubic-bezier(0.12, 0.49, 0, 1) 0.5s;
    -moz-transition: all 1s cubic-bezier(0.12, 0.49, 0, 1) 0.5s;
    -o-transition: all 1s cubic-bezier(0.12, 0.49, 0, 1) 0.5s;
    transition: all 1s cubic-bezier(0.12, 0.49, 0, 1) 0.5s;
}

#Baner3642[data-scene="1"] .textContainer0 .line,
#Baner3642[data-scene="2"] .textContainer0 .line,
#Baner3642[data-scene="3"] .textContainer0 .line,
#Baner3642[data-scene="4"] .textContainer0 .line,
#Baner3642[data-scene="5"] .textContainer0 .line {
    width: 100%;
    opacity: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.12, 0.49, 0, 1);
    -moz-transition: all 0.5s cubic-bezier(0.12, 0.49, 0, 1);
    -o-transition: all 0.5s cubic-bezier(0.12, 0.49, 0, 1);
    transition: all 0.5s cubic-bezier(0.12, 0.49, 0, 1);
}

#Baner3642[data-scene="1"] .textContainer0 .text0,
#Baner3642[data-scene="2"] .textContainer0 .text0,
#Baner3642[data-scene="3"] .textContainer0 .text0,
#Baner3642[data-scene="4"] .textContainer0 .text0,
#Baner3642[data-scene="5"] .textContainer0 .text0 {
    margin-left: -100%;
}

#Baner3642[data-scene="1"] .text1,
#Baner3642[data-scene="2"] .text2,
#Baner3642[data-scene="3"] .text3 {
    margin-left: -100%;
    -webkit-animation: textAnim 2.5s cubic-bezier(0.12, 0.49, 0, 1) forwards 0.8s;
    animation: textAnim 2.5s cubic-bezier(0.12, 0.49, 0, 1) forwards 0.8s;
}

@-webkit-keyframes textAnim {
    0% {
        margin-left: -100%;
    }
    40% {
        margin-left: -4%;
    }
    60% {
        margin-left: 4%;
    }
    99.999% {
        margin-left: 100%;
    }
    100% {
        margin-left: -100%;
    }
}

@keyframes textAnim {
    0% {
        margin-left: -100%;
    }
    40% {
        margin-left: -5%;
    }
    60% {
        margin-left: 5%;
    }
    99.999% {
        margin-left: 100%;
    }
    100% {
        margin-left: -100%;
    }
}

#Baner3642 .photo {
    position: absolute;
    top: 0px;
    -webkit-transition: left 3s linear, opacity 0.2s linear;
    -moz-transition: left 3s linear, opacity 0.2s linear;
    -o-transition: left 3s linear, opacity 0.2s linear;
    transition: left 3s linear, opacity 0.2s linear;
}

#Baner3642 .photo1 {
    z-index: 0;
}

#Baner3642 .photo2 {
    z-index: 1;
}

#Baner3642 .photo3 {
    z-index: 2;
}

#Baner3642 .photo4 {
    z-index: 3;
}

#Baner3642[data-scene="-1"] .photo1 {
    left: 0;
}

#Baner3642[data-scene="0"] .photo1 {
    left: -37px;
}

#Baner3642[data-scene="-1"] .photo2,
#Baner3642[data-scene="0"] .photo2 {
    left: -37px;
    opacity: 0;
}

#Baner3642[data-scene="1"] .photo2 {
    left: 0;
    opacity: 1;
}

#Baner3642[data-scene="-1"] .photo3,
#Baner3642[data-scene="0"] .photo3,
#Baner3642[data-scene="1"] .photo3 {
    left: 0px;
    opacity: 0;
}

#Baner3642[data-scene="2"] .photo3 {
    left: -37px;
    opacity: 1;
}

#Baner3642[data-scene="-1"] .photo4,
#Baner3642[data-scene="0"] .photo4,
#Baner3642[data-scene="1"] .photo4,
#Baner3642[data-scene="2"] .photo4 {
    left: -37px;
    opacity: 0;
}

#Baner3642[data-scene="3"] .photo4 {
    left: 0;
    opacity: 1;
}

h3 {
    position: relative;
    z-index: 20;
    text-align: center;
    color: #f00;
}