@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,.caseList 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 preloader {

    0% {
        left: 0%;
    }
   25% {
        left: 25%
    }
    50% {
        left:  50%
    }
    75% {
        left: 75% 
    }
    100% {
        left: 100%;
    }

}

.cd-transition-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: visible;
    overflow: hidden;
    pointer-events: none;
}

.cd-transition-layer .bg-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-2%);
    -moz-transform: translateY(-50%) translateX(-2%);
    -ms-transform: translateY(-50%) translateX(-2%);
    -o-transform: translateY(-50%) translateX(-2%);
    transform: translateY(-50%) translateX(-2%);
    height: 100%;
    width: 2500%;
    background: url(../images/ink.png) no-repeat 0 0;
    background-size: 100% 100%;
}

.cd-transition-layer.visible {
    opacity: 1;
    visibility: visible;
}

.cd-transition-layer.opening .bg-layer {
    -webkit-animation: cd-sequence 1.0s steps(24);
    -moz-animation: cd-sequence 1.0s steps(24);
    animation: cd-sequence 1.0s steps(24);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.cd-transition-layer.closing .bg-layer {
    -webkit-animation: cd-sequence-reverse 1.0s steps(24);
    -moz-animation: cd-sequence-reverse 1.0s steps(24);
    animation: cd-sequence-reverse 1.0s steps(24);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.no-cssanimations .cd-transition-layer {
    display: none;
}

@-webkit-keyframes cd-sequence {
    0% {
        -webkit-transform: translateY(-50%) translateX(-2%);
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-98%);
    }
}

@-moz-keyframes cd-sequence {
    0% {
        -moz-transform: translateY(-50%) translateX(-2%);
    }
    100% {
        -moz-transform: translateY(-50%) translateX(-98%);
    }
}

@keyframes cd-sequence {
    0% {
        -webkit-transform: translateY(-50%) translateX(-2%);
        -moz-transform: translateY(-50%) translateX(-2%);
        -ms-transform: translateY(-50%) translateX(-2%);
        -o-transform: translateY(-50%) translateX(-2%);
        transform: translateY(-50%) translateX(-2%);
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-98%);
        -moz-transform: translateY(-50%) translateX(-98%);
        -ms-transform: translateY(-50%) translateX(-98%);
        -o-transform: translateY(-50%) translateX(-98%);
        transform: translateY(-50%) translateX(-98%);
    }
}

@-webkit-keyframes cd-sequence-reverse {
    0% {
        -webkit-transform: translateY(-50%) translateX(-98%);
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-2%);
    }
}

@-moz-keyframes cd-sequence-reverse {
    0% {
        -moz-transform: translateY(-50%) translateX(-98%);
    }
    100% {
        -moz-transform: translateY(-50%) translateX(-2%);
    }
}

@keyframes cd-sequence-reverse {
    0% {
        -webkit-transform: translateY(-50%) translateX(-98%);
        -moz-transform: translateY(-50%) translateX(-98%);
        -ms-transform: translateY(-50%) translateX(-98%);
        -o-transform: translateY(-50%) translateX(-98%);
        transform: translateY(-50%) translateX(-98%);
    }
    100% {
        -webkit-transform: translateY(-50%) translateX(-2%);
        -moz-transform: translateY(-50%) translateX(-2%);
        -ms-transform: translateY(-50%) translateX(-2%);
        -o-transform: translateY(-50%) translateX(-2%);
        transform: translateY(-50%) translateX(-2%);
    }
}



@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 scaleIn {

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

    @keyframes jello {

        from,
        11.1%,
        to {
            -webkit-transform: none;
            -moz-transform: none;
            transform: none
        }
    
        22.2% {
            -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
            -moz-transform: skewX(-12.5deg) skewY(-12.5deg);
            transform: skewX(-12.5deg) skewY(-12.5deg)
        }
    
        33.3% {
            -webkit-transform: skewX(6.25deg) skewY(6.25deg);
            -moz-transform: skewX(6.25deg) skewY(6.25deg);
            transform: skewX(6.25deg) skewY(6.25deg)
        }
    
        44.4% {
            -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
            -moz-transform: skewX(-3.125deg) skewY(-3.125deg);
            transform: skewX(-3.125deg) skewY(-3.125deg)
        }
    
        55.5% {
            -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
            -moz-transform: skewX(1.5625deg) skewY(1.5625deg);
            transform: skewX(1.5625deg) skewY(1.5625deg)
        }
    
        66.6% {
            -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
            -moz-transform: skewX(-.78125deg) skewY(-.78125deg);
            transform: skewX(-.78125deg) skewY(-.78125deg)
        }
    
        77.7% {
            -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
            -moz-transform: skewX(0.390625deg) skewY(0.390625deg);
            transform: skewX(0.390625deg) skewY(0.390625deg)
        }
    
        88.8% {
            -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
            -moz-transform: skewX(-.1953125deg) skewY(-.1953125deg);
            transform: skewX(-.1953125deg) skewY(-.1953125deg)
        }
    
    }

    @keyframes rotate{
        from{transform: rotate(0);}
        to{transform:  rotate(1turn);}
    }