body{
    height: 100%;
    width:100%;
    padding: 0;
    margin: 0;
}
.navi{
    max-width: 1200px;
    width: 100%;
    padding-top:5px; 
}
.navi-logo{
    background: url("../images/login/ico_logo.png") no-repeat center !important;
    width: 379px !important;
}
.bg{
    height:620px;
    min-width: 1170px;
    background: url("../images/login/bg-login.png") no-repeat center;
}
.body{
    width: 100%;
    min-width: 1170px;
    height: 620px;
    /* position:absolute; */
    /* top:60px; */
    background: url("../images/login/column.png") no-repeat 50% 10%;
    margin: 0 auto;
}
.container{
    min-width: 1170px;
    max-width: 1200px;
    margin:0 auto;
}

.body .form{
    background: url("../images/login/img-loginArea.png") 0 0 no-repeat;
    width: 374px;
    margin-top: 160px;
}
.body .form input[type=text] {
    top: 96px;
    height: 35px;
}
.body .form input[type=password] {
    top: 153px;
    height: 35px;
}
.body .form label {
    top:200px;
    left: 35px;
}
.body .form [type=submit]{
    left: 35px;
    border-radius: 5px;
}
.mascot{
    width: 173px;
    height: 155px;
    position: relative;
    top: -127px;
    left: 50%;
    margin-left: -82px;
    -webkit-animation: mascot 4s linear 1;
            animation: mascot 4s linear 1;
}


@-webkit-keyframes mascot{
    0%{
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
    12.5%{
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    25%{
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
    37.5%{
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d( 50%, 0, 0);
    }
    50%{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100%{
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}


@keyframes mascot{
    0%{
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
    12.5%{
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    25%{
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
    37.5%{
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d( 50%, 0, 0);
    }
    50%{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100%{
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}
.login_6{
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
    /* opacity: 0; */
    -webkit-animation: login_6 4s linear 1;
            animation: login_6 4s linear 1;
}
@-webkit-keyframes login_6{
    0%{
        opacity: 1;
    }
    50%{
        opacity:1;    
    }
    51%{
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes login_6{
    0%{
        opacity: 1;
    }
    50%{
        opacity:1;    
    }
    51%{
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.login_5{
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: login_5 4s linear 1;
            animation: login_5 4s linear 1;
}
@-webkit-keyframes login_5{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;    
    }
    51%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    61%{
        opacity: 0;
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes login_5{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;    
    }
    51%{
        opacity: 1;
    }
    60%{
        opacity: 1;
    }
    61%{
        opacity: 0;
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.login_4{
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: login_4 4s linear 1;
            animation: login_4 4s linear 1;
}
@-webkit-keyframes login_4{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;    
    }
    60%{
        opacity:1 ;
    }
    61%{
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    71%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes login_4{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;    
    }
    60%{
        opacity:1 ;
    }
    61%{
        opacity: 1;
    }
    70%{
        opacity: 1;
    }
    71%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.login_3{
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: login_3 4s linear 1;
            animation: login_3 4s linear 1;
}
@-webkit-keyframes login_3{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;    
    }
    60%{
        opacity:0 ;
    }
    70%{
        opacity: 1;
    }
    71%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    81%{
        opacity: 0;
    }
    90%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes login_3{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;    
    }
    60%{
        opacity:0 ;
    }
    70%{
        opacity: 1;
    }
    71%{
        opacity: 1;
    }
    80%{
        opacity: 1;
    }
    81%{
        opacity: 0;
    }
    90%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.login_2{
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: login_2 4s linear 1;
            animation: login_2 4s linear 1;
}
@-webkit-keyframes login_2{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;    
    }
    60%{
        opacity:0 ;
    }
    70%{
        opacity: 0;
    }
    80%{
        opacity: 1;
    }
    81%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    91%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes login_2{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0;    
    }
    60%{
        opacity:0 ;
    }
    70%{
        opacity: 0;
    }
    80%{
        opacity: 1;
    }
    81%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    91%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.login_1{
    /* float: left; */
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: login_1 4s linear 1;
            animation: login_1 4s linear 1;
}
@-webkit-keyframes login_1{
    0%{
        opacity: 0;
    }
	89%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    91%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes login_1{
    0%{
        opacity: 0;
    }
	89%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    91%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
.box{
    height: 620px;
    /* background: #2580de; */
    overflow: hidden;
    position: relative;
    /* left: 20%; */
    float: left;
    padding: 0 10px;
}
.circleBox{
    width: 620px;
    height: 620px;
    transform: rotate3d(1,0,0,55deg);
    -webkit-transform: rotate3d(1,0,0,50deg); 
    /* -webkit-animation: circle 6s linear ;
            animation: circle 6s linear ;*/
    
}
@-webkit-keyframes circle{
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1,45deg);
                transform: rotate3d(0, 0, 1,45deg);
      }
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform:rotate3d(0, 0, 1,360deg);
                transform: rotate3d(0, 0, 1,360deg);
      }
}
@keyframes circle{
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
                transform: rotate3d(0, 0, 1, 360deg);
      }
      to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1);
                transform: rotate3d(0, 0, 1);
      }
}   
.circle1{
    width: 620px;
    height:620px;
    border: dashed 1px #fff;
    border-radius: 50%;
    /* transform: rotate3d(0,0,1,-45deg);
    -webkit-transform: rotate3d(0,0,1,-45deg); */
    -webkit-animation: circle 4s linear infinite;
    animation: circle 4s linear infinite;
    position: relative;
    top: 60px;
}

.circle2{
    width: 620px;
    height: 620px;
    border: dashed 1px #fff;
    border-radius: 50%;
    /* transform: rotate3d(0,0,1,-45deg);
    -webkit-transform: rotate3d(0,0,1,-45deg); */
    position: absolute;
    top: -85px;
    left: 0;    
    -webkit-animation: circle 4s linear infinite;    
    animation: circle 4s linear infinite;
}
.little_circle1{
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 100%;
    position: relative;
    left: 60%; 
}
.little_circle2{
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 100%;
    position: relative;
    left: 60%; 
    top:96%;
}
.little_circle3{
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 100%;
    position: relative;
    left: 60%; 
}
.little_circle4{
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 100%;
    position: relative;
    left: 60%; 
    top:96%;
}
.link_line1{
    height: 140px;
    width: 1px;
    border-right: dashed 1px #fff;
    position: relative;
    left: 60.5%;
    top:-12px;
    -webkit-animation: link_line1 4s linear infinite;
            animation: link_line1 4s linear infinite;
}
.link_line2{
    height: 140px;
    width: 1px;
    border-right: dashed 1px #fff;
    position: relative;
    top:73%;
    left: 60.5%;
    -webkit-animation: link_line1 4s linear infinite;
            animation: link_line1 4s linear infinite;
}
@-webkit-keyframes link_line1{
    from{
        -webkit-transform-origin: 0 0;
        transform-origin:s 0 0;
        transform: rotateX(0);
        -webkit-transform: rotateX(0);
    }
    to {
        -webkit-transform-origin:0 0;
        transform-origin:s 0 0;
        transform: rotateX(360deg);
        -webkit-transform: rotateX(360deg);
    }
}
@keyframes link_line1{
    from{
        -webkit-transform-origin:  0 0;
        transform-origin:s 0 0;
        transform: rotateZ(0);
        -webkit-transform: rotateZ(0);
    }
    to {
        -webkit-transform-origin: 0 0;
        transform-origin:s 0 0;
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
    }
}
.imagesBox{
    width: 620px;
    height: 620px;
    position: absolute;
    top: 0;
    left: 0;
}


.chassis{
    position: absolute;
    top: 145px;
    left: 40px;
    -webkit-animation: chassis 2s linear 1;
            animation: chassis 2s linear 1;

}
@-webkit-keyframes chassis{
    from {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes chassis{
    from {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.light_around{
    position: absolute;
    top: -27px;
    left: 30px;
    -webkit-animation: light_around 2s linear 1;
            animation: light_around 2s linear 1;

}
@-webkit-keyframes light_around{
    from {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
        z-index: 100;
        visibility: visible;
      }
    
      to {
          z-index: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes light_around{
    from {
        -webkit-transform: translate3d(0, -200%, 0);
        transform: translate3d(0, -200%, 0);
        z-index: 100;
        visibility: visible;
      }
    
      to {
          z-index: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.keyBoard{
    position: absolute;
    top:245px;
    left: 160px;
    -webkit-animation: keyBoard 2s linear 1;
            animation: keyBoard 2s linear 1;
}
@-webkit-keyframes keyBoard{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        z-index: 1;
    }
    10% {
        z-index: 1;
        -webkit-transform: translate3d(0, -500%, 0);
        transform: translate3d(0, -500%, 0);
        visibility: visible;
      }
    89%{
        z-index: 1;
    }
      90% {
          z-index: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes keyBoard{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        z-index: 1;
    }
    10% {
        z-index: 1;
        -webkit-transform: translate3d(0, -500%, 0);
        transform: translate3d(0, -500%, 0);
        visibility: visible;
      }
    89%{
        z-index: 1;
    }
      90% {
          z-index: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.handBag{
    position: absolute;
    top:220px;
    left: 176px;
    -webkit-animation: handBag 2s linear 1;
            animation: handBag 2s linear 1;
}
@-webkit-keyframes handBag{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    20% {
        -webkit-transform: translate3d(0, -1000%, 0);
        transform: translate3d(0, -1000%, 0);
        visibility: visible;
      }
    
      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes handBag{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    20% {
        -webkit-transform: translate3d(0, -1000%, 0);
        transform: translate3d(0, -1000%, 0);
        visibility: visible;
      }
    
      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.pieChart{
    position: absolute;
    top:245px;
    left: 310px;
    -webkit-animation: pieChart 2s linear 1;
            animation: pieChart 2s linear 1;
}

@-webkit-keyframes pieChart{
    from {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}

@keyframes pieChart{
    from {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.markerChassis{
    position: absolute;
    top:300px;
    left: 370px;
    -webkit-animation: markerChassis 2s linear 1;
            animation: markerChassis 2s linear 1;
}
@-webkit-keyframes markerChassis{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    20% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes markerChassis{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    20% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
      100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.marker{
    position: absolute;
    top:265px;
    left: 390px;
    -webkit-animation: marker 2s linear 1;
            animation: marker 2s linear 1;
}
@-webkit-keyframes marker{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    10% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
     100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes marker{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    10% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
     100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.computer{
    position: absolute;
    top:115px;
    left: 270px;
    -webkit-animation: computer 2s linear 1;
            animation: computer 2s linear 1;
}
@-webkit-keyframes computer{
    from {
        -webkit-transform: translate3d(0, -500%, 0);
        transform: translate3d(0, -500%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes computer{
    from {
        -webkit-transform: translate3d(0, -500%, 0);
        transform: translate3d(0, -500%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.screen{
    position: absolute;
    top:127px;
    left: 240px;
    -webkit-animation: screen 3s linear 1;
            animation: screen 3s linear 1;
}
@-webkit-keyframes screen{
    0%{
        opacity: 0;
      -webkit-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
    }
     20% {
         opacity: 0;
      -webkit-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
     }
     50% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }

    100% { 
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        }  
}
@keyframes screen{
    0%{
        opacity: 0;
      -webkit-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
    }
     20% {
         opacity: 0;
      -webkit-transform: scale3d(0, 0, 0);
      transform: scale3d(0, 0, 0);
     }
     50% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }

    100% { 
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        }  
}

.screen1{
    position: absolute;
    top:120px;
    left: 190px;
    -webkit-animation: screen1 3s linear 1;
            animation: screen1 3s linear 1;
}
@-webkit-keyframes screen1{
    0%{
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
      }
    20% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
       }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }

    100% { 
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        }  
}
@keyframes screen1{
    0%{
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
      }
    20% {
        opacity: 0;
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
       }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        transform: scale3d(0.1, 0.1, 0.1) translate3d(100px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }

    100% { 
        opacity: 1;
        -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        } 
}
.dataStack{
    position: absolute;
    top:225px;
    left: 225px;
    -webkit-animation: dataStack 2s linear 1;
            animation: dataStack 2s linear 1;
}
@-webkit-keyframes dataStack{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
      }
    20% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
       }
    40% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes dataStack{
    0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
      }
    20% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
       }
    40% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.textBox{
    position: absolute;
    top:225px;
    left: 435px;
    -webkit-animation: textBox 2s linear 1;
            animation: textBox 2s linear 1;
}
@-webkit-keyframes textBox{
    from {
        -webkit-transform: translate3d(0, -600%, 0);
        transform: translate3d(0, -600%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes textBox{
    from {
        -webkit-transform: translate3d(0, -600%, 0);
        transform: translate3d(0, -600%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
.money{
    position: absolute;
    top:280px;
    left: 500px;
    -webkit-animation: money 2s linear 1;
            animation: money 2s linear 1;
}
@-webkit-keyframes money{
    /* from {
        -webkit-transform: translate3d(0, -500%, 0);
        transform: translate3d(0, -500%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      } */
      0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
      }
    20% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
       }
    40% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}
@keyframes money{
    /* from {
        -webkit-transform: translate3d(0, -500%, 0);
        transform: translate3d(0, -500%, 0);
        visibility: visible;
      }
    
      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      } */
      0%{
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
      }
    20% {
        -webkit-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
       }
    40% {
        -webkit-transform: translate3d(0, -700%, 0);
        transform: translate3d(0, -700%, 0);
        visibility: visible;
      }
    
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
}