@keyframes warn {

 

 }

 .mask-white { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.2); content:''; -webkit-transition:-webkit-transform .6s; 
    transition:transform .6s; -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0) }
.index-about .right:hover .mask-white,.prolist li:hover .mask-white{ -webkit-transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0); transform:scale3d(2.2,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)}


@keyframes serv_one_border {
    0% {
        opacity: 0
    }

    5% {
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5)
    }
}
@keyframes  long {
    0% {
        width: 0
    }
  
    25% {
        width: 25%
    }
  
    50% {
        width: 100%
    }
  
    75% {
        width: 25%
    }
  
    to {
        width: 0
    }
  }
  @keyframes ripple-wave1{
	to {
		box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1),0 0 0 45px rgba(255, 255, 255, 0.02);
	}
  }

  @keyframes righTOP{

    from {
        transform: translateY(20px);
        opacity: 0;
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
}

    to {
        transform: translateY(0);
        opacity: 1;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
}
  }

  
@keyframes scaleIn {

    from { opacity: 1; -webkit-transform: scale(1); transform: scale(1);  }
    
    to { -webkit-transform: scale(1.05); transform: scale(1.05);}
    
    }

    @keyframes  gradient-rectangle {
        0% {
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
            -webkit-transform-origin: bottom;
            transform-origin: bottom;
            background: linear-gradient(to top,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.6));
            background: -webkit-linear-gradient(to top,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.6));
            opacity: 1;
        }
    
        100% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transform-origin: top;
            transform-origin: top;
            background: linear-gradient(to top,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.6));
            background: -webkit-linear-gradient(to top,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.6));
            opacity: 0;
        }
    }
    

    @keyframes topFloat {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
    
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes red-ball {
        from {
            offset-distance: 0%;
        }
    
        to {
            offset-distance: 100%;
        }
    }