@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-image: url(./../images/back2.png);
    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: 113px;
    top: -7px;
    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;
}


.banner__f9{
    top: -195px;
    left: 6px;
    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: -195px;
    left: 6px;
    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: 507px;
    opacity: 0;

    position: absolute;
}

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

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


.content_action{

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


@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: -200px;
    opacity: 0;
}

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

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

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

.line2_back{
    opacity: 1;
    transition: .1s opacity .3s;
    animation: .3s 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: -200px;
    opacity: 0;
}

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

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

.line9{
    position: absolute;
    left: 900px;
    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: 1100px;
}

.line10_back{
    opacity: 1;
    transition: .1s opacity .6s;
    animation: .3s 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);
    }
    100%{
        transform: translateY(0) translateX(0);
    }
}


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

@keyframes lineMove3 {
    0%{
        opacity: 0;
        transform: translateY(-200px) translateX(100px);
    }
    100%{
        transform: translateY(0) translateX(0);
    }
}

@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: 413px;
    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: 413px;
    position: absolute;
    z-index: 2;
    opacity: 0;
    top : 20px;
}

.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__text_active{
    opacity: 0;
    animation: 1s op2 ease-in-out forwards ;
}

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

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

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

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


.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);
    }

}