.technology1{
    width: 720px;
    height: 471px;
    position: relative;
    transform: scale(0.7);
    left:-50px;
    
  }

  .technology1 img{
    opacity: 0;
  }

.technology1.active {
    width: 720px;
    height: 471px;
    position: relative;
    transform: scale(0.7);
    left:-50px;
  }

  .technology1.active img{
    opacity: 1;
  }

  
@media (max-width: 1536px) {
    .technology1, .technology1.active {    
        left: -200px;      
    }

}
@media (max-width: 1366px) {
    .technology1, .technology1.active {    
        left: -80px;      
    }

}
  
  .technology1-bg {
    width: 720px;
    height: 471px;    
    position: absolute;
    z-index: 9;
  
  }
  
  .technology1.active .technology1-bg{
    animation: technology1-bg-move 3s 1;
  }
  
  @keyframes technology1-bg-move {
    from {
        top: 50px;
        opacity: 1
    }
  
    to {
        top: 0px;
        opacity: 1
    }
  }
  
  .technology1-v {
    position: absolute;
    width: 461px;
    height: 383px;
    z-index: 10;
    top: 20px;
    left: 230px;
  
  }
  
  .technology1.active .technology1-v{
    animation: technology1-v-move 3s 1;
    -webkit-animation-timing-function: ease-in-out;
    /* Chrome, Safari, Opera */
    animation-timing-function: ease-in-out;
  }
  
  @keyframes technology1-v-move {
    0% {
        top: -255px;
        left: -207px;
        opacity: 1;
    }
  
  
    100% {
        top: 20px;
        left: 230px;
        opacity: 1;
    }
  }
  


/* ------------- */

.technology2 {
    width: 731px;
    height: 478px;
    position: relative;
    transform: scale(0.7);
    left:-20px;
}


.technology2 img{
    opacity: 0;
  }

.technology2.active {
    width: 731px;
    height: 478px;
    position: relative;
    transform: scale(0.7);
    left:-20px;
}
.technology2.active img{
    opacity: 1;
  }

@media (max-width: 1536px) {
    .technology5, .technology5.active {    
        left: 100px;      
    }

}
@media (max-width: 1366px) {
    .technology5, .technology5.active {    
        left: -50px;      
    }

}


.technology2-bg {
    width: 731px;
    height: 478px;    
    position: absolute;
    z-index: 9;
}

.technology2.active .technology2-bg{
    animation: technology2-bg-move 3s 1;
}

@keyframes technology2-bg-move {
    from {
        top: 50px;
        opacity: 1
    }

    to {
        top: 0px;
        opacity: 1
    }
}

.technology2-v {
    position: absolute;
    width: 576px;
    height: 300px;
    z-index: 10;
    top: 30px;
    left: 80px;
   
}

.technology2.active .technology2-v{
    animation: technology2-v-move 3s 1;
    -webkit-animation-timing-function: ease-in-out;
    /* Chrome, Safari, Opera */
    animation-timing-function: ease-in-out;
}


@keyframes technology2-v-move {
    0% {
        top: -246px;
        left: 600px;
        opacity: 1;
    }


    100% {
        top: 30px;
        left: 80px;
        opacity: 1;
    }
}

.technology2-icon {
    position: absolute;
    width: 414px;
    height: 220px;
    top: -70px;
    left: 120px;
    z-index: 12;
 

}


.technology2.active .technology2-icon{
    animation: technology2-icon-bounce 6s 1;
}

@keyframes technology2-icon-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
        opacity: .0;
    }

    40% {
        transform: translateY(-30px);

    }

    60% {
        transform: translateY(-15px);


    }

    100% {
        opacity: 1;
    }
}


/* ----------------- */

.technology3 {
    width: 731px;
    height: 478px;
    position: relative;
    transform: scale(0.7);
    left:-50px;
}


.technology3 img{
    opacity: 0;
  }

.technology3.active{
    width: 731px;
    height: 478px;
    position: relative;
    transform: scale(0.7);
    left:-50px;
}
.technology3.active img{
    opacity: 1;
  }

@media (max-width: 1536px) {
    .technology3, .technology3.active {    
        left: -200px;      
    }

}
@media (max-width: 1366px) {
    .technology3, .technology3.active {    
        left: -80px;      
    }

}
.technology3-bg {
    width: 731px;
    height: 478px;   
    position: absolute;
    z-index: 7;

}

.technology3.active .technology3-bg {
    animation: technology3-bg-move 3s 1;
}

@keyframes technology3-bg-move {
    from {
        top: 50px;
        opacity: 1
    }

    to {
        top: 0px;
        opacity: 1
    }
}

.technology3-img {
    position: absolute;
    width: 617px;
    height: 420px;
    z-index: 9;
    left: 0;
    top: 0;
   
}

.technology3.active .technology3-img {
    animation: technology3-img-move 3s 1;
    -webkit-animation-timing-function: ease-in-out;
    /* Chrome, Safari, Opera */
    animation-timing-function: ease-in-out;
}


@keyframes technology3-img-move {
    0% {
        left: -295px;
        top: 250px;
        opacity: 1;
    }


    100% {
        left: 0;
        top: 0;
        opacity: 1;
    }
}

/* --------------- */

.technology4 {
    width: 731px;
    height: 478px;
    position: relative;
    transform: scale(0.7);
    left:-20px;
}
.technology4 img{
    opacity: 0;
  }

.technology4.active{
    width: 731px;
    height: 478px;
    position: relative;
    transform: scale(0.7);
    left:-20px;
}

.technology4.active img{
    opacity: 1;
  }

.technology4-bg {
    width: 731px;
    height: 478px;    
    position: absolute;
    z-index: 9;

}

.technology4.active .technology4-bg {
    animation: technology4-bg-move 3s 1;
}

@keyframes technology4-bg-move {
    from {
        top: 50px;
        opacity: 1
    }

    to {
        top: 0px;
        opacity: 1
    }
}

.technology4-icon {
    width: 429px;
    height: 290px;
    position: absolute;
    z-index: 9;
    left: 210px;
    top: -10px;
    
  
}
.technology4.active .technology4-icon {
    animation: technology4-icon-move 3s 1;
}

@keyframes technology4-icon-move {
    from {               
        opacity: 1
    }

    to {                
        opacity: 1
    }
}

.technology4-pointer {
    width: 429px;
    height: 290px;
    position: absolute;
    z-index: 9;
    left: 210px;
    top: -150px;
  
}

.technology4.active .technology4-pointer {
    animation: technology2-pointer-bounce 6s 1;
}

@keyframes technology2-pointer-bounce {

0%,20%,50%,80%,100% {
transform: translateY(0);

}

40% {
transform: translateY(-30px);
top: -200px;

}

60% {
transform: translateY(-15px);
top: -180px;

}

100% {
opacity: 1;
top: -150px;
}
}

/* --------------- */

.technology5 {
    width: 720px;
    height: 471px;
    position: relative;
    transform: scale(0.7);
    left: -50px;
}
.technology5 img{
    opacity: 0;
  }

.technology5.active {
    width: 720px;
    height: 471px;
    position: relative;
    transform: scale(0.7);
    left: -50px;
}
.technology5.active img{
    opacity: 1;
  }

@media (max-width: 1536px) {
    .technology5, .technology5.active {    
        left: -200px;      
    }

}
@media (max-width: 1366px) {
    .technology5, .technology5.active {    
        left: -80px;      
    }

}
.technology5-bg {
    width: 720px;
    height: 471px; 
    position: absolute;
    z-index: 7;
}

.technology5.active .technology5-bg {
    animation: technology5-bg-move 3s 1;
}

@keyframes technology5-bg-move {
    from {
        top: 50px;
        opacity: 1
    }

    to {
        top: 0px;
        opacity: 1
    }
}

.technology5-img {
    position: absolute;
    width: 318px;
    height: 218px;
    z-index: 9;
    left: 250px;
    top: 130px;
    animation: technology5-img-move 3s 1;
    -webkit-animation-timing-function: ease-in-out;
    /* Chrome, Safari, Opera */
    animation-timing-function: ease-in-out;
}

.technology5.active .technology5-img {
    animation: technology5-img-move 3s 1;
    -webkit-animation-timing-function: ease-in-out;
    /* Chrome, Safari, Opera */
    animation-timing-function: ease-in-out;
}

@keyframes technology5-img-move {
    0% {
        left: 0px;
        top: 350px;
        opacity: 1;
    }


    100% {
        left: 250px;
        top: 130px;
        opacity: 1;
    }
}