@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');

body {
    min-width:320px;
    position:relative;
    overflow-x:hidden;
    margin:0;
}

*{
    outline: none;
}

.logo{

}


.banner{
    width: 100%;
    max-height: 90px;
    background-color : #000;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.banner__inner{
    width: 100%;
    height: 100%;
}

.banner__inner2{
    width: 100%;
    height: 90px;
    background-image: url(./../images/fone.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: 1s opacity;

}

.banner__inner2_active{
    opacity: 1;
    transition: 1s opacity;
}

.banner__content{
    min-width: 1000px;
    width: 1000px;
    height : 90px;
    z-index: 3;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    position: relative;
}

.banner__f1{
    left: 420px;
    opacity: 0;
    position: absolute;
    width: 320px;
    height: auto;
}

.banner__f1_back{
    animation: 1s op ease-in-out forwards;
}


.banner__f1_active{
    opacity: 1;
    animation: 1s move3 ease-in-out forwards;
}

.banner__f1_back2{
    opacity: 1;
    animation: 1s move33 ease-in-out forwards;
}

.banner__f2{
    left: 550px;
    opacity: 0;
z-index: 3;
    position: absolute;
}

.banner__f2_back{
    animation: 1s op2 ease-in-out forwards ;

}

.banner__f2_active{
    opacity: 0;
}

.banner__f2_route{
    animation: 3s rot ease-in-out forwards;
    z-index: 10;
}

.banner__f3{
    left: 470px;
    opacity: 0;

    position: absolute;
}

.banner__f3_back{
    animation: 1s op2 ease-in-out forwards;
}

.banner__f3_active{
    animation: .3s op ease-in-out forwards;
}


.banner__f4{
    left: 625px;
    top: 35px;
    opacity: 0;
z-index: 4;
    position: absolute;
}

.banner__f4_back{
    animation: 1s op3 ease-in-out forwards;
}

.banner__f4_active{
    opacity: 0;
}

.banner__f4_route{
    animation: 2s rot11 ease-in-out forwards;
}


.banner__f5{
    left: 727px;
    opacity: 0;

    position: absolute;
}

.banner__f5_back{
    animation: 1s op2 ease-in-out forwards;

}

.banner__f5_active{
    opacity: 0;
}

.banner__f5_route{
    animation: 3s rot2 ease-in-out forwards;
    z-index: 10;
}


.banner__f6{
    top: 35px;
    left: 810px;
    opacity: 0;
    z-index: 2;
    position: absolute;
}

.banner__f6_back{
    animation: 1s op3 ease-in-out forwards;
}

.banner__f6_active{
    opacity: 0;
}

.banner__f6_route{
    animation: 2s rot22 ease-in-out forwards;
}

.banner__f7{
    top: -100px;
    opacity: 0;
    left : 15px;
    position: absolute;
}

.banner__f7_back{
    animation: 1s op3 ease-in-out forwards;
}

.banner__f7_active{
    opacity: 1;
    animation: .2s op5 ease-in-out forwards;
    left: -100px;
    transition: 1s left;
}





.banner__f8{
    left: 106px;
    width: 83px;
    top: 1px;
    opacity: 0;
    position: absolute;
    z-index: 3;
}


.banner__f8_back{
    animation: 1s op3 ease-in-out forwards;
}

.banner__f8_active{
    opacity: 1;
    animation: .1s move4 linear infinite;
}

.banner__f8_move{
    opacity: 1;
    animation: .5s op5 ease forwards;
}


.content{
    position: absolute;
    min-width: 545px;
    height: 90px;
    left: 454px;
    z-index: 2;
    top : 0;
}

.content__active{
    top: 137px;
    transition: 1s all;
}

.content__move{
    left: 220px;
    transition: 1s all;
}

.p1{
    position: absolute;
    left: 482px;
    width: 377px;
    z-index: 4;
    opacity: 0;
}

.p1__active1{
    opacity: 1;
}


.p1__move1{
    opacity: 0;
}

.p2{
    position: absolute;
    left: 482px;
    width: 377px;
    z-index: 4;
    opacity: 0;
}

.p2__active1{
    opacity: 1;
}


.p2__move1{
    opacity: 0;
}

.p3{
    position: absolute;
    left: 482px;
    width: 377px;
    z-index: 4;
    opacity: 0;
}


.p3__active1{
    opacity: 1;
}


.p3__move1{
    opacity: 0;
}


.banner__f9{
    top: -155px;
    left: 6px;
    width: 437px;
    opacity: 0;
    position: absolute;
    z-index: 1;
}

.banner__f9_back{
    animation: 1s op4 ease-in-out forwards;
}

.banner__f9_action{
    width: 100%;
    height: auto;
    top : unset;
}

.banner__f9_active{
    opacity: 1;
    animation: 1s op5 ease-in-out forwards;
}

.banner__f92{
    top: -160px;
    left: 6px;
    width: 437px;
    opacity: 0;
    position: absolute;
    z-index: 1;
}

.banner__f92_back{
    animation: 1s op4 ease-in-out forwards;
}

.banner__f92_action{
    width: 100%;
    height: auto;
    top : 10px;
}


.banner__f92_active{
    opacity: 1;
    animation: 1s op5 ease-in-out forwards;
}

.banner__f10{
    left: 790px;
    width: 77px;
    top: 3px;
    opacity: 0;
    position: absolute;
}

.banner__f10_back{
    animation: 1s op22 ease-in-out forwards;
}

.banner__f10_move{
    left: 283px;
    width: 67px;
    top: 9px;
    transition: 1s all;
}

.banner__f10_active{
    opacity: 1;
    animation: 1s op5 ease-in-out forwards;
}


.content_action{

    animation: 1s change ease-in-out forwards ;
}

.g1{
    top: -4px;
    position: absolute;
    left: 250px;
    opacity: 0;
    transform: translateX(-100px);
}

.g1__active{
    opacity: 1;
    transform: translateY(0);
    transition: 1s all;
}

.g1__move{
    opacity: 0;
    transition: 1s all;
}

.g2{
    top: 10px;
    position: absolute;
    left: 550px;
    opacity: 0;
    transform: translateX(-100px);
}

.g2__active{
    opacity: 1;
    transform: translateY(0);
    transition: 1s all;
}
.g2__move{
    opacity: 0;
    transition: 1s all;
}

.of1{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 29px;
    left: 450px;
    top: 25px;
    position: absolute;
    line-height: 36px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    opacity: 0;
}

.of1__active{
    opacity: 1;
    transition: .5s all;
}

.of1__color{
    text-shadow: 0px 2px 54px #D700FF, 0px 0px 24px #D700FF, 0px 2px 27px #D700FF, 0px 0px 4px #D700FF;
    transition: .5s all;
}

.of1__move{
    opacity: 0;
    transition: .5s all;
}


.of2{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 29px;
    left: 450px;
    top: 7px;
    position: absolute;
    line-height: 36px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    opacity: 0;
}

.of2__active{
    opacity: 1;
    transition: .5s all;
}

.of2__color{
    text-shadow: 0px 2px 24px #FF0000, 0px 0px 14px #FF0000, 0px 2px 25px #FF0000;
    transition: 1s all;
}

.of2__move{
    opacity: 0;
    transition: .5s all;
}



.of3{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 29px;
    left: 450px;
    top: 7px;
    position: absolute;
    line-height: 36px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    opacity: 0;
}

.of3__active{
    opacity: 1;
    transition: .5s all;
}

.of3__color{
    text-shadow: 0px 2px 24px #38A5FF, 0px 0px 14px #38A5FF, 0px 2px 25px #38A5FF;
    transition: 1s all;
}

.of3__move{
    opacity: 0;
    transition: .5s all;
}



.of4{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 29px;
    left: 450px;
    top: 7px;
    position: absolute;
    line-height: 36px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    opacity: 0;
}

.of4__active{
    opacity: 1;
    transition: .5s all;
}

.of4__color{
    text-shadow: 0px 2px 54px #D700FF, 0px 0px 24px #D700FF, 0px 2px 27px #D700FF, 0px 0px 4px #D700FF;
    transition: .5s all;
}

.of4__move{
    opacity: 0;
    transition: .5s all;
}


.of5{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 29px;
    left: 450px;
    top: 25px;
    position: absolute;
    line-height: 36px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    opacity: 0;
}

.of5__active{
    opacity: 1;
    transition: .5s all;
}

.of5__color{
    text-shadow: 0px 2px 24px #FF0000, 0px 0px 14px #FF0000, 0px 2px 25px #FF0000;
    transition: 1s all;
}

.of5__move{
    opacity: 0;
    transition: .5s all;
}



@keyframes rot {
    0%{
        transform: rotate(0);
opacity: 1;
        width: 230px;
        height: 80px;
    }
    30%{
        transform: rotate(90deg);
        width: 230px;
        height: 80px;
    }
    60%{
        height: 8px;
    }
    80%{

        width: 90px;
        transform: rotate(90deg);
        left: 650px;
        position: absolute;

    }
    100%{
        opacity: 1;
        left: 640px;
    }
}

@keyframes rot2 {
    0%{
        transform: rotate(0);
        width: 230px;
        height: 80px;
        opacity: 1;
    }
    30%{
        transform: rotate(90deg);
        width: 230px;
        height: 80px;
    }
    60%{
        height: 8px;
    }
    80%{
        width: 90px;
        transform: rotate(90deg);
        left: 660px;
        position: absolute;
    }
    100%{
        opacity: 1;
        left: 650px;
    }
}


@keyframes rot11 {
    0%{
        transform: rotate(0);
        opacity: 1;
    }
    50%{
        transform: rotate(90deg);
        opacity: 0;
    }
    100%{
    }
}

@keyframes rot22 {
    0%{
        transform: rotate(0);
        opacity: 1;
    }
    50%{
        transform: rotate(90deg);
        opacity: 0;

    }
    100%{
    }
}


@keyframes change {


    0%{
        opacity: 1;
        top : -195px;
    }
    100%{
        min-width: 79px;
        height: 105px;
        top: -7px;
    }



}


@keyframes op {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes op2 {
    0%{
        opacity: 0;
        transform: translateX(100px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes op22 {
    0%{
        opacity: 0;
        transform: translateX(-50px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes op3 {
    0%{
        opacity: 0;
        transform: scale(0);
    }
    50%{
        transform: scale(1.3);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}



@keyframes op4 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes op5 {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

@keyframes move3 {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-500px);
    }
}

@keyframes move33 {
    0%{
        transform: translateY(500px);
    }
    100%{
        transform: translateY(0);
    }
}


@keyframes move2 {
    0%{
        transform: translateX(0);
        opacity: 1;
    }

    100%{
        transform: translateX(-100px);
        opacity: 0;
    }
}

@keyframes move4 {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}



.element
{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    position: absolute;
    left: 647px;
    top: 29px;
    color: #FFFFFF;
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    display: none;
    z-index: 2;
}


.animate span {
    display: inline-block;
}

.element__active{
    display: block;
}

.ov4{
    position: absolute;
    left: 600px;
    top: 12px;
    width: 350px;
    opacity: 0;
}

.ov4__back{
    animation: 1s op4 ease-in-out forwards;
}

.ov4__active{
    animation: 1s op5 ease-in-out forwards;
}


.ov5{
    position: absolute;
    left: 600px;
    top: 12px;
    width: 350px;
    opacity: 0;
}

.ov5__back{
    animation: 1s op4 ease-in-out forwards;
}

.ov5__active{
    animation: 1s op5 ease-in-out forwards;
}



.ov6{
    position: absolute;
    left: 600px;
    top: 12px;
    width: 350px;
    opacity: 0;
}

.ov6__back{
    animation: 1s op4 ease-in-out forwards;
}

.ov6__active{
    animation: 1s op5 ease-in-out forwards;
}

.element__active span{
    opacity: 0;
    transform: translate(0, -100px) rotate(360deg) scale(0);
    animation: revolveDrop .3s forwards;

}

.element__move{
    animation: 1s op5 ease-in-out forwards;
}


@keyframes type{
    from { width: 0; }
}


.animate span:nth-of-type(2) {
    animation-delay: .05s;
}
.animate span:nth-of-type(3) {
    animation-delay: .1s;
}
.animate span:nth-of-type(4) {
    animation-delay: .15s;
}
.animate span:nth-of-type(5) {
    animation-delay: .2s;
}
.animate span:nth-of-type(6) {
    animation-delay: .25s;
}
.animate span:nth-of-type(7) {
    animation-delay: .3s;
}
.animate span:nth-of-type(8) {
    animation-delay: .35s;
}
.animate span:nth-of-type(9) {
    animation-delay: .4s;
}
.animate span:nth-of-type(10) {
    animation-delay: .45s;
}
.animate span:nth-of-type(11) {
    animation-delay: .5s;
}
.animate span:nth-of-type(12) {
    animation-delay: .55s;
}
.animate span:nth-of-type(13) {
    animation-delay: .6s;
}
.animate span:nth-of-type(14) {
    animation-delay: .65s;
}
.animate span:nth-of-type(15) {
    animation-delay: .7s;
}
.animate span:nth-of-type(16) {
    animation-delay: .75s;
}
.animate span:nth-of-type(17) {
    animation-delay: .8s;
}
.animate span:nth-of-type(18) {
    animation-delay: .85s;
}
.animate span:nth-of-type(19) {
    animation-delay: .9s;
}
.animate span:nth-of-type(20) {
    animation-delay: .95s;
}
.animate span:nth-of-type(21) {
    animation-delay: 1s;
}
.animate span:nth-of-type(22) {
    animation-delay: 1.05s;
}
.animate span:nth-of-type(23) {
    animation-delay: 1.1s;
}
.animate span:nth-of-type(24) {
    animation-delay: 1.15s;
}
.animate span:nth-of-type(25) {
    animation-delay: 1.2s;
}
.animate span:nth-of-type(26) {
    animation-delay: 1.25s;
}
.animate span:nth-of-type(27) {
    animation-delay: 1.3s;
}
.animate span:nth-of-type(28) {
    animation-delay: 1.35s;
}
.animate span:nth-of-type(29) {
    animation-delay: 1.4s;
}
.animate span:nth-of-type(30) {
    animation-delay: 1.45s;
}
.animate span:nth-of-type(31) {
    animation-delay: 1.5s;
}





@keyframes revolveDrop {
    30% {
        transform: translate(0, -50px) rotate(180deg) scale(1);
    }

    60% {
        transform: translate(0, 20px) scale(.8) rotate(0deg);
    }

    100% {
        transform: translate(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}



.line1{
    position: absolute;
    left: -583px;
    top: -11px;
    opacity: 0;
}

.line1_back{
    opacity: 1;
    animation: 1s lineMove ease-in-out forwards;
}

.line1_move{
    animation: .3s lineOut ease-in-out forwards;
}

.line2{
    position: absolute;
    left: 425px;
    opacity: 0;
}

.line2_back{
    opacity: 1;
    transition: .1s opacity .3s;
    animation: 1s lineMove2 ease-in-out forwards .3s;
}

.line2_move{
    animation: .3s lineOut ease-in-out forwards;
}

.line3{
    position: absolute;
    opacity: 0;
    left: 315px;
    transform: translateY(200px) translateX(-500px);
}

.line3_back{
    opacity: 1;
    transition: .1s opacity .6s;
    animation: .3s lineMove3 ease-in-out forwards .6s;
}

.line3_move{
    animation: .3s lineOut ease-in-out forwards;
}

.line4{
    position: absolute;
    opacity: 0;
    left: 900px;
}

.line4_back{
    opacity: 1;
    transition: .1s opacity .9s;
    animation: .3s lineMove2 ease-in-out forwards .9s;
}

.line4_move{
    animation: .3s lineOut ease-in-out forwards;
}


.line5{
    position: absolute;
    left: 700px;
    opacity: 0;
}

.line5_back{
    opacity: 1;
    transition: .1s opacity .3s;
    animation: .3s lineMove2 ease-in-out forwards .3s;
}

.line5_move{
    animation: .3s lineOut ease-in-out forwards;
}


.line6{
    position: absolute;
    opacity: 0;
    left: 820px;
}

.line6_back{
    opacity: 1;
    transition: .1s opacity .6s;
    animation: .3s lineMove3 ease-in-out forwards .6s;
}

.line6_move{
    animation: .3s lineOut ease-in-out forwards;
}


.line7{
    position: absolute;
    opacity: 0;
    left: -200px;
}

.line7_back{
    opacity: 1;
    transition: .1s opacity .6s;
    animation: .3s lineMove3 ease-in-out forwards .6s;
}

.line7_move{
    animation: .3s lineOut ease-in-out forwards;
}





.line8{
    position: absolute;
    left: -623px;
    opacity: 0;
}

.line8_back{
    opacity: 1;
    animation: 1s lineMove ease-in-out forwards;
}

.line8_move{
    animation: .3s lineOut ease-in-out forwards;
}

.line9{
    position: absolute;
    left: 620px;
    opacity: 0;
}

.line9_back{
    opacity: 1;
    transition: .1s opacity .3s;
    animation: .3s lineMove2 ease-in-out forwards .3s;
}

.line9_move{
    animation: .3s lineOut ease-in-out forwards;
}

.line10{
    position: absolute;
    opacity: 0;
    left: 620px;
}

.line10_back{
    opacity: 1;
    transition: .1s opacity .6s;
    animation: 1s lineMove3 ease-in-out forwards .6s;
}

.line10_move{
    animation: .3s lineOut ease-in-out forwards;
}




.line11{
    position: absolute;
    left: 300px;
    opacity: 0;
}

.line11_back{
    opacity: 1;
    animation: .3s lineMove ease-in-out forwards;
}

.line11_move{
    animation: .3s lineOut ease-in-out forwards;
}


.line12{
    position: absolute;
    opacity: 0;
    left: 780px;
}

.line12_back{
    opacity: 1;
    transition: .1s opacity .6s;
    animation: .3s lineMove3 ease-in-out forwards .6s;
}

.line12_move{
    animation: .3s lineOut ease-in-out forwards;
}

@keyframes lineMove {
    0%{
        transform: translateY(-200px) translateX(-250px) rotate(15deg);
        width: 0;
    }
    100%{
        transform: translateY(0) translateX(0) rotate(15deg);
        width: 100%;
    }
}


@keyframes lineMove2 {
    0%{
        opacity: 0;
        transform: translateY(100px) translateX(-250px) rotate(-20deg);
        width: 0;
    }
    100%{
        transform: translateY(0) translateX(0) rotate(-20deg);
        width: 100%;
    }
}

@keyframes lineMove3 {
    0%{
        opacity: 0;
        transform: translateY(200px) translateX(-300px)  rotate(-20deg);
        width: 0;
    }
    100%{
        transform: translateY(0) translateX(0)  rotate(-20deg);
        width: 100%;
    }
}

@keyframes lineOut {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}


.ov1{
    opacity: 0;
    left: 580px;
    top: 15px;
    z-index: 3;
    position: absolute;
}

.ov1_back{
    animation: 1s op4 ease-in-out forwards;
}

.ov1_active{
    opacity: 0;
}

.ov1_route{
    animation: 2s rot11 ease-in-out forwards;
}

.ov2{
    opacity: 0;
    left: 760px;
    top: 15px;
    z-index: 1;
    position: absolute;
}

.ov2_back{
    animation: 1s op4 ease-in-out forwards;
}

.ov2_active{
    opacity: 0;
}

.ov2_route{
    animation: 2s rot22 ease-in-out forwards;
}


.ov3{
    opacity: 0;
    left: 557px;
    top: -20px;
    z-index: 2;
    position: absolute;
}

.ov3_back{
    animation: 1s op4 ease-in-out forwards;
}

.ov3_active{
    opacity: 1;
    animation: .1s op5 ease-in-out forwards;
}


.banner__logo2{
    width: 228px;
    position: relative;
    z-index: 1;
    opacity: 0;
}

.banner__logo2_active{
    animation: 1s logoUp ease-in-out forwards ;
}

.banner__logo2_back{
    animation: 1s logoUp2 ease-in-out forwards ;
}

.banner__logo3{
    width: 255px;
    position: absolute;
    z-index: 2;
    opacity: 0;
    top: -2px;
    left: -32px;
}

.banner__logo3_active{
    animation: 1s logoUp ease-in-out forwards ;
}

.banner__logo3_back{
    animation: 1s logoUp2 ease-in-out forwards ;
}

.banner__logo{
    opacity: 0;
    position: absolute;
    width: 413px;
}

.banner__logo_active{
    animation: 1s logoUp ease-in-out forwards ;
}

.banner__logo_back{
    animation: 1s logoUp2 ease-in-out forwards ;
}


.banner__text{
    position: absolute;
    left : 750px;
    opacity: 0;
}

.banner__text2{
    position: absolute;
    left : 750px;
    opacity: 0;
}


.banner__text_active{
    opacity: 0;
    animation: 1s op2 ease-in-out forwards ;
}


.banner__text2_active{
    opacity: 0;
    animation: 1s op2 ease-in-out forwards ;
}

.banner__text_back{
    opacity: 0;
    animation: .5s logoOut ease-in-out forwards;
}

.banner__text2_back{
    opacity: 0;
    animation: .5s logoOut ease-in-out forwards;
}

.banner__dop1{
    position: absolute;
    left: 0px;
    width: 134px;
    z-index: 1;
    top: 3px;
    opacity: 0;
}

.banner__dop1_active{
    animation: 1s logoUp ease-in-out forwards ;
}

.banner__dop1_back{
    animation: 1s logoUp2 ease-in-out forwards ;
}

.plat{
    position: absolute;
    left: 250px;
    opacity: 0;
    z-index: 2;
}

.plat__active{
    opacity: 1;
    transition: 1s all;
}

.circle{
    position: absolute;
    left: 134px;
    opacity: 0;
    z-index: 1;
    top: -114px;
}

.circle__active{
    opacity: 1;
    transition: 1s all;
}

.chip{
    position: absolute;
    top: 7px;
    left: 0;
}

.chip__active{
    animation: 1.5s chip ease forwards;
}

@keyframes chip {
    0%{
        left: 0;
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    100%{
        left: 350px;
        opacity: 0;
    }
}


.banner__dop2{
    position: absolute;
    left : 0px;
    width: 211px;
    z-index: 2;
    top:15px;
    opacity: 0;
}

.banner__dop2_active{
    animation: 1s logoUp ease-in-out forwards ;
}

.banner__dop2_back{
    animation: 1s logoUp2 ease-in-out forwards ;
}


.banner__dop3{
    position: absolute;
    left : 220px;
    width: 243px;
    z-index: 1;
    top:20px;
    opacity: 0;
}

.banner__dop3_active{
    animation: 1s logoUp ease-in-out forwards ;
}

.banner__dop3_back{
    animation: 1s logoUp2 ease-in-out forwards ;
}



.banner__dop4{
    position: absolute;
    left : 220px;
    width: 243px;
    z-index: 2;
    top:20px;
    opacity: 0;
}

.banner__dop4_active{
    animation: 1s logoUp ease-in-out forwards ;
}

.banner__dop4_back{
    animation: 1s logoUp2 ease-in-out forwards ;
}


.banner__dop5 {
    position: absolute;
    left: 480px;
    opacity: 0;
}


.banner__dop5_active{
    opacity: 0;
    animation: 1s op2 ease-in-out forwards ;
}

.banner__dop5_back{
    opacity: 0;
    animation: .5s logoOut ease-in-out forwards;
}



.banner__dop6{
    position: absolute;
    left: 690px;
    opacity: 0;
}


.banner__dop6_active{
    opacity: 0;
    animation: 1s op2 ease-in-out forwards ;
}

.banner__dop6_back{
    opacity: 0;
    animation: .5s logoOut ease-in-out forwards;
}




@keyframes logoUp {

      0%{
          opacity: 0;
      }

      100%{
          opacity: 1;
      }

  }

@keyframes logoUp2 {

    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }

}


@keyframes logoOut {

    0%{
        opacity: 1;
        transform: translateX(0);
    }

    100%{
        opacity: 0;
        transform: translateX(-50px);
    }

}