@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);
     }
 }