@keyframes md_shadow {
  
  0% {box-shadow: 0px 4px 8px rgba(0, 0, 0, 0);}
  100% {box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);}
}





















/* 
@keyframes ani-ufo {
    0%{
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    20%{
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    40%{
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    50%{
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    60%{
      -webkit-transform: translateY(-5px);
      transform: translateY(-5px);
    }
    80%{
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100%{
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  


.h2 .con_icon.icon_ufo::before{

    animation-name: ani-ufo;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes ani-tech {
    0%{
      -webkit-transform: translateY(0);
      transform: rotateY(0deg);
    }
    50%{
      -webkit-transform: translateY(180);
      transform: rotateY(180deg);
    }
    100%{
      -webkit-transform: translateY(0);
      transform: rotateY(0deg);
    }
  }

.h2 .con_icon.icon_tech::before{

    animation-name: ani-tech;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes ani-work {
    0%{
        right:40px;
      transform: rotateY(0deg);
    }

    25%{
        right:-40px;
        transform: rotateY(0deg);
      }

      
    50%{
        right:-40px;
      -webkit-transform: translateY(180);
      transform: rotateY(180deg);
    }

    75%{
        right:40px;
        transform: rotateY(180deg);
      }
    100%{
        right:40px;
      -webkit-transform: translateY(0);
      transform: rotateY(0deg);
    }
  }

.h2 .con_icon.icon_work::before{

    animation-name: ani-work;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}


@keyframes ani-solution {
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
  }

.h2 .con_icon.icon_solution::before{

    animation-name: ani-solution;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes ani-vrix {
    0%{
        -webkit-transform: translateY(0);
        transform: rotateY(0deg);
      }
      50%{
        -webkit-transform: translateY(180);
        transform: rotateY(180deg);
      }
      100%{
        -webkit-transform: translateY(0);
        transform: rotateY(0deg);
      }
    }

.h2 .con_icon.icon_vrix::before{

    animation-name: ani-vrix;
    animation-duration: 4s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes ani-client {
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
  }

.h2 .con_icon.icon_client::before{

    animation-name: ani-solution;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}




#who-visual .since::before{
    animation-name: ani-since;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;

}

@keyframes ani-since {
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
  }

.hello {
    opacity: 0;
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -ms-transition: 1s ease;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;

}

.hello.in-view {
    opacity: 1 ;
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    -ms-transition: 1s ease ;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
   
}


@keyframes ani-visual-typo {
    0%{ 
        transform: scale(0,1); 
        -ms-transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
    }

    25%{
        transform: scale(1,1); 
        -ms-transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
    }

    75%{
        transform: scale(1,1); 
        -ms-transform-origin: right top;
        -webkit-transform-origin: right top;
        -moz-transform-origin: right top;
        -o-transform-origin: right top;
        transform-origin: right top;
    }

    100%{
        transform: scale(0,1); 
        -ms-transform-origin: right top;
        -webkit-transform-origin: right top;
        -moz-transform-origin: right top;
        -o-transform-origin: right top;
        transform-origin: right top;
    }
  }


.visual_typo.hello, .h2.hello {
    opacity: 1 ;
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    -ms-transition: 1s ease ;
    -webkit-transition: 1s ease;
    -moz-transition: 1s ease;
    -o-transition: 1s ease;
    transition: 1s ease;
   
}

.visual_typo.hello.in-view {
    transition-delay: 2s !important;

}

.visual_typo.hello .ani_border {
transform: scale(0);
transform-origin: 0;
}

.visual_typo.hello.in-view .ani_border {
    transform: scale(1);
    transform-origin: right top;
    transition: 1s ease;
    transition-delay: 1s !important;
}
  

.visual_typo.hello.in-view .ani_border.ty2 {   

    transform-origin: right top;
    transition: 1.2s ease;
}


.visual_typo.hello .typo span::before{  
    transform: scale(0,1); 
    transform-origin: left top;
   
}

.visual_typo.hello.in-view .typo span::before{  
    animation-name: ani-visual-typo;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-direction: normal;
}

.visual_typo.hello .typo span{  
    color: rgba(255, 255, 255, 0.0);
}


.visual_typo.hello.in-view .typo span{  
    color: rgba(255, 255, 255, 1);
    transition-delay: 1.5s ;
    transition-duration: 1.5s;
}



.visual_typo.hello.in-view .typo span:nth-child(odd)::before{  
    animation-delay: 1.4s;

}

.visual_typo.hello.in-view .typo span:nth-child(odd){  
    transition-delay: 1.6s ;

}

.visual_typo.hello.in-view .typo span:nth-child(even)::before{  
    animation-delay: 1.6s;

}

.visual_typo.hello.in-view .typo span:nth-child(even){  
    transition-delay: 1.8s ;

}

.h2.hello span::before {    
  transform: scale(0,1); 
  transform-origin: left top;
}
.h2.hello.in-view span::before {
    animation-name: ani-visual-typo;
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-direction: normal;
}

.h2.hello span{  
  color: rgba(0, 0, 0, 0.0);
}


.h2.hello.in-view span{  
  transition-duration: 1s;
  color: rgba(0, 0, 0, 1);
}


.h2.ty2.hello span{  
  color: rgba(181, 103, 71, 0.0);
  
}


.h2.ty2.hello.in-view span{  
  transition-duration: 1s;
  color: rgba(181, 103, 71, 1);
}



.h2.hello::before{
  transform: scale(0);
  transform-origin: left top;
  }
  
.h2.hello.in-view::before{
    transform: scale(1);
    transform-origin: left top;
    transition-duration: 0.4s ;
    transition-timing-function: ease;
    transition-delay: 1s ;
}

.h2.hello .con_icon::after {
  transform: scale(0);
  transform-origin: right top;
  }
  
.h2.hello.in-view .con_icon::after {
    transform: scale(1);
    transform-origin: right top;
    transition-duration: 0.3s ;
    transition-timing-function: ease;
    transition-delay: 1s ;
}



    
    








 */