@keyframes realName{
    0% { top: -10px; right: 30px}
    5%{top: -5px;right: 23px}
    10%{top: 0px;right: 15px}
    15%{top: 5px;right: 12px}
    20%{top:10px;right: 8px}
    25%{top: 15px;right: 6px}
    30%{top: 20px;right: 3px}
    35%{top: 25px;right: 7px}
    40%{top: 30px;right: 10px}
    45%{top: 35px;right: 18px}
    50%{top: 40px;right: 25px}
    55%{top: 35px;right: 38px}
    60%{top: 30px;right: 45px}
    65%{top: 25px;right: 50px}
    70%{top: 20px;right: 55px}
    75%{top: 15px;right: 52px}
    80%{top:10px;right: 47px}
    85%{top: 5px;right: 42px}
    90%{top: 0px;right: 38px}
    95%{top: -5px;right: 32px}
    100%{top: -10px; right: 27px}
}
@-webkit-keyframes realName{
    0% { top: -10px; right: 30px}
    5%{top: -5px;right: 23px}
    10%{top: 0px;right: 15px}
    15%{top: 5px;right: 12px}
    20%{top:10px;right: 8px}
    25%{top: 15px;right: 6px}
    30%{top: 20px;right: 3px}
    35%{top: 25px;right: 7px}
    40%{top: 30px;right: 10px}
    45%{top: 35px;right: 18px}
    50%{top: 40px;right: 25px}
    55%{top: 35px;right: 38px}
    60%{top: 30px;right: 45px}
    65%{top: 25px;right: 50px}
    70%{top: 20px;right: 55px}
    75%{top: 15px;right: 52px}
    80%{top:10px;right: 47px}
    85%{top: 5px;right: 42px}
    90%{top: 0px;right: 38px}
    95%{top: -5px;right: 32px}
    100%{top: -10px; right: 27px}
}
.animation{
    position: absolute;
}
.realName .animation{
    right: 0px;
    bottom: 0px;
    animation: realName 3s infinite linear;
    -webkit-animation:realName 3s infinite linear;
}
@keyframes docSign{
    from{bottom: 30px}
    to{bottom: 0px}
}

@-webkit-keyframes docSign{
    from{bottom: 30px}
    to{bottom: 0px}
}
.docSign .animation{
    bottom: 0px;
    right: 0px;
    animation: docSign 1s infinite linear;
    -webkit-animation:docSign 1s infinite linear;
}
@-webkit-keyframes save-1{
    from{
        -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform :rotate(360deg) ;
        -moz-transform:rotate(360deg) ;
        -ms-transform:rotate(360deg) ;
        -o-transform: rotate(360deg);
        transform:rotate(360deg) ;
    }
}
@keyframes save-1{
    from{
        -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform :rotate(360deg) ;
        -moz-transform:rotate(360deg) ;
        -ms-transform:rotate(360deg) ;
        -o-transform: rotate(360deg);
        transform:rotate(360deg) ;
    }
}
@-webkit-keyframes save-2{
    from{
        -webkit-transform :rotate(360deg) ;
        -moz-transform:rotate(360deg) ;
        -ms-transform:rotate(360deg) ;
        -o-transform: rotate(360deg);
        transform:rotate(360deg) ;
    }
    to{
        -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes save-2{
    from{
        -webkit-transform :rotate(360deg) ;
        -moz-transform:rotate(360deg) ;
        -ms-transform:rotate(360deg) ;
        -o-transform: rotate(360deg);
        transform:rotate(360deg) ;
    }
    to{
        -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.save .floor{
    bottom: 0px;
    left: 0px;
}
.save .save-1{
    animation: save-1 2s infinite linear;
    -webkit-animation: save-1 2s infinite linear;
    top: 39px;
    right: 67px;
}
.save .save-2{
    animation: save-2 4s infinite linear;
    -webkit-animation: save-2 4s infinite linear;
    top: 8px;
    right: 22px;
}


@-webkit-keyframes arbitrate-shammer{
    00%{
        -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    60%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    90%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 2px
    }
    100%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 2px
    }
}
@-webkit-keyframes arbitrate-click{
    00%{opacity: 0}
    70%{opacity: 0}
    90%{opacity: 1}
    100%{opacity: 1}
}
@keyframes arbitrate-shammer{
    00%{
        -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    60%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    90%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 2px
    }
    100%{
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        bottom: 2px
    }
}
@keyframes arbitrate-click{
    00%{opacity: 0}
    70%{opacity: 0}
    90%{opacity: 1}
    100%{opacity: 1}
}
.arbitrate .floor{
    bottom: 0px;
    left: 0px;
}
.arbitrate .shammer{
    right: 4px;bottom: 45px;
    animation: arbitrate-shammer 1.1s infinite linear;
    -webkit-animation: arbitrate-shammer 1.1s infinite linear
}
.arbitrate .click{
    left: 0px;
    bottom: 25px;
    -webkit-animation: arbitrate-click 1.1s infinite linear;
    animation: arbitrate-click 1.1s infinite linear
}


@keyframes minute{
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 4px 0;
        -moz-transform-origin: 4px 0;
        -ms-transform-origin: 4px 0;
        -o-transform-origin: 4px 0;
        transform-origin: 4px 0;
    }
    to{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: 4px 0;
        -moz-transform-origin: 4px 0;
        -ms-transform-origin: 4px 0;
        -o-transform-origin: 4px 0;
        transform-origin: 4px 0;
    }
}
@-webkit-keyframes  minute{
    from{
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 4px 0;
        -moz-transform-origin: 4px 0;
        -ms-transform-origin: 4px 0;
        -o-transform-origin: 4px 0;
        transform-origin: 4px 0;
    }
    to{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: 4px 0;
        -moz-transform-origin: 4px 0;
        -ms-transform-origin: 4px 0;
        -o-transform-origin: 4px 0;
        transform-origin: 4px 0;
    }
}
.timeStamp .minute{
    top: 64px;
    left: 60px;
    animation: minute 5s infinite linear;
    -webkit-animation : minute 5s infinite linear;
}
.timeStamp .hour{
    top: 58px;
    left: 58px;
}

@-webkit-keyframes business{
    0%{ -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20%{
        -webkit-transform : rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100%{
        -webkit-transform : rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg); }
}
@keyframes business{
    0%{ -webkit-transform : rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    20%{
        -webkit-transform : rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100%{
        -webkit-transform : rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg); }
}
.business .center{
    left: 35px;
    top: 30px;
    animation: business 1.6s infinite linear;
    -webkit-animation: business 1.6s infinite linear;
}

@-webkit-keyframes protect-right{
    from{top: -10px;right:-5px;}
    to{top: 5px;right: 5px}
}
@-webkit-keyframes protect-left{
    from{top: -10px;left:5px;}
    to{top: 10px;left: 25px}
}
@keyframes protect-right{
    from{top: -10px;right:-5px;}
    to{top: 5px;right: 5px}
}
@keyframes protect-left{
    from{top: -10px;left:5px;}
    to{top: 10px;left: 25px}
}
.protect .left{
    top: -10px;left:5px;
    animation: protect-left 0.5s infinite linear;
    -webkit-animation:protect-left 0.5s infinite linear;
}
.protect .right{
    top: -10px;right:-5px;
    animation: protect-right 0.6s infinite linear;
    -webkit-animation: protect-right 0.6s infinite linear;
}


@keyframes signature{
    0%{    left: 37px;
        bottom: 37px;}
    25%{    left: 54px;
        bottom: 58px;}
    40%{    left: 60px;
        bottom: 41px;}
    65%{    left: 73px;
        bottom: 53px;}
    85%{left: 75px;
        bottom: 41px;}
    90%{    left: 82px;
        bottom: 44px;}
    100%{    left: 82px;
        bottom: 44px;}
}
@-webkit-keyframes signature {
    0%{    left: 37px;
        bottom: 37px;}
    25%{    left: 54px;
        bottom: 58px;}
    40%{    left: 60px;
        bottom: 41px;}
    65%{    left: 73px;
        bottom: 53px;}
    85%{left: 75px;
        bottom: 41px;}
    90%{    left: 82px;
        bottom: 44px;}
    100%{    left: 82px;
        bottom: 44px;}
}
.signature .pen{
    left: 37px;
    bottom: 37px;
    animation: signature 2s infinite linear;
    -webkit-animation:signature 2s infinite linear;

}
.outer{
    position: relative;
    display: inline-block;
    height: 128px;
    width: 128px;
}
@keyframes top-to-bottom {
    0%{
        top: 0px;
    }
    100%{
        top: 8px;
    }
}
@-webkit-keyframes top-to-bottom {
    0%{
        top: 0px;
    }
    100%{
       top: 8px;
    }
}
.partner-read-more section{
    -webkit-animation: top-to-bottom 0.5s infinite ease-out;
    -o-animation: top-to-bottom 0.5s infinite ease-out;
    animation: top-to-bottom 0.5s infinite ease-out;
    animation-direction:alternate;
    -webkit-animation-direction:alternate;
}
@media (max-width: 991px) {
    .outer{
        width: 100px;
        height: 100px;
    }
    .outer .background{
        width: 100px;
    }
    .magnifier,.pen{
        width: 30px;
    }
    @keyframes realName{
        0% { top: -10px; right: 30px}
        5%{top: -5px;right: 23px}
        10%{top: 0px;right: 15px}
        15%{top: 5px;right: 12px}
        20%{top:10px;right: 8px}
        25%{top: 15px;right: 6px}
        30%{top: 20px;right: 3px}
        35%{top: 25px;right: 7px}
        40%{top: 30px;right: 10px}
        45%{top: 35px;right: 18px}
        50%{top: 40px;right: 25px}
        55%{top: 35px;right: 38px}
        60%{top: 30px;right: 45px}
        65%{top: 25px;right: 50px}
        70%{top: 20px;right: 55px}
        75%{top: 15px;right: 52px}
        80%{top:10px;right: 47px}
        85%{top: 5px;right: 42px}
        90%{top: 0px;right: 38px}
        95%{top: -5px;right: 32px}
        100%{top: -10px; right: 27px}
    }
    @-webkit-keyframes realName{
        0% { top: -10px; right: 30px}
        5%{top: -5px;right: 23px}
        10%{top: 0px;right: 15px}
        15%{top: 5px;right: 12px}
        20%{top:10px;right: 8px}
        25%{top: 15px;right: 6px}
        30%{top: 20px;right: 3px}
        35%{top: 25px;right: 7px}
        40%{top: 30px;right: 10px}
        45%{top: 35px;right: 18px}
        50%{top: 40px;right: 25px}
        55%{top: 35px;right: 38px}
        60%{top: 30px;right: 45px}
        65%{top: 25px;right: 50px}
        70%{top: 20px;right: 55px}
        75%{top: 15px;right: 52px}
        80%{top:10px;right: 47px}
        85%{top: 5px;right: 42px}
        90%{top: 0px;right: 38px}
        95%{top: -5px;right: 32px}
        100%{top: -10px; right: 27px}
    }
    .animation{
        position: absolute;
    }
    .realName .animation{
        right: 0px;
        bottom: 0px;
        animation: realName 3s infinite linear;
        -webkit-animation:realName 3s infinite linear;
    }

    @keyframes docSign{
        from{bottom: 30px}
        to{bottom: 0px}
    }

    @-webkit-keyframes docSign{
        from{bottom: 30px}
        to{bottom: 0px}
    }
    .docSign .animation{
        bottom: 0px;
        right: 0px;
        animation: docSign 1s infinite linear;
        -webkit-animation:docSign 1s infinite linear;
    }
    .docSign .seal{
        width: 30px;
    }
    @-webkit-keyframes save-1{
        from{
            -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to{
            -webkit-transform :rotate(360deg) ;
            -moz-transform:rotate(360deg) ;
            -ms-transform:rotate(360deg) ;
            -o-transform: rotate(360deg);
            transform:rotate(360deg) ;
        }
    }
    @keyframes save-1{
        from{
            -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to{
            -webkit-transform :rotate(360deg) ;
            -moz-transform:rotate(360deg) ;
            -ms-transform:rotate(360deg) ;
            -o-transform: rotate(360deg);
            transform:rotate(360deg) ;
        }
    }
    @-webkit-keyframes save-2{
        from{
            -webkit-transform :rotate(360deg) ;
            -moz-transform:rotate(360deg) ;
            -ms-transform:rotate(360deg) ;
            -o-transform: rotate(360deg);
            transform:rotate(360deg) ;
        }
        to{
            -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }
    @keyframes save-2{
        from{
            -webkit-transform :rotate(360deg) ;
            -moz-transform:rotate(360deg) ;
            -ms-transform:rotate(360deg) ;
            -o-transform: rotate(360deg);
            transform:rotate(360deg) ;
        }
        to{
            -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }
    .save .floor{
        bottom: 0px;
        left: 0px;
    }
    .save .save-1{
        animation: save-1 2s infinite linear;
        -webkit-animation: save-1 2s infinite linear;
        top: 31px;
        right: 45px;
        width: 27px;
    }
    .save .save-2{
        animation: save-2 4s infinite linear;
        -webkit-animation: save-2 4s infinite linear;
        top: 8px;
        right: 8px;
        width: 40px;
    }


    @-webkit-keyframes arbitrate-shammer{
        00%{
            -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        60%{
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        90%{
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            bottom: 2px
        }
        100%{
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            bottom: 2px
        }
    }
    @-webkit-keyframes arbitrate-click{
        00%{opacity: 0}
        70%{opacity: 0}
        90%{opacity: 1}
        100%{opacity: 1}
    }
    @keyframes arbitrate-shammer{
        00%{
            -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        60%{
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        90%{
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            bottom: 2px
        }
        100%{
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            bottom: 2px
        }
    }
    @keyframes arbitrate-click{
        00%{opacity: 0}
        70%{opacity: 0}
        90%{opacity: 1}
        100%{opacity: 1}
    }
    .arbitrate .floor{
        bottom: 0px;
        left: 0px;
    }
    .arbitrate .shammer{
        width: 70px;
        right: 4px;bottom: 45px;
        animation: arbitrate-shammer 1.1s infinite linear;
        -webkit-animation: arbitrate-shammer 1.1s infinite linear
    }
    .arbitrate .click{
        width: 20px;
        left: 0px;
        bottom: 25px;
        -webkit-animation: arbitrate-click 1.1s infinite linear;
        animation: arbitrate-click 1.1s infinite linear
    }


    @keyframes minute{
        from{
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 4px 0;
            -moz-transform-origin: 4px 0;
            -ms-transform-origin: 4px 0;
            -o-transform-origin: 4px 0;
            transform-origin: 4px 0;
        }
        to{
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transform-origin: 4px 0;
            -moz-transform-origin: 4px 0;
            -ms-transform-origin: 4px 0;
            -o-transform-origin: 4px 0;
            transform-origin: 4px 0;
        }
    }
    @-webkit-keyframes  minute{
        from{
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 4px 0;
            -moz-transform-origin: 4px 0;
            -ms-transform-origin: 4px 0;
            -o-transform-origin: 4px 0;
            transform-origin: 4px 0;
        }
        to{
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
            -webkit-transform-origin: 4px 0;
            -moz-transform-origin: 4px 0;
            -ms-transform-origin: 4px 0;
            -o-transform-origin: 4px 0;
            transform-origin: 4px 0;
        }
    }
    .timeStamp .minute{
        width: 8px;
        top: 47px;
        left: 46px;
        animation: minute 5s infinite linear;
        -webkit-animation : minute 5s infinite linear;
    }
    .timeStamp .hour{
        width: 35px;
        top: 42px;
        left: 45px;
    }

    @-webkit-keyframes business{
        0%{ -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        20%{
            -webkit-transform : rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        100%{
            -webkit-transform : rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg); }
    }
    @keyframes business{
        0%{ -webkit-transform : rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        20%{
            -webkit-transform : rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        100%{
            -webkit-transform : rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg); }
    }
    .business .center{
        width: 52px;
        left: 25px;
        top: 18px;
        animation: business 1.6s infinite linear;
        -webkit-animation: business 1.6s infinite linear;
    }

    @-webkit-keyframes protect-right{
        from{top: -10px;right:-5px;}
        to{top: 4px;right: 3px}
    }
    @-webkit-keyframes protect-left{
        from{top: -10px;left:5px;}
        to{top: 7px;left: 18px}
    }
    @keyframes protect-right{
        from{top: -10px;right:-5px;}
        to{top: 4px;right: 3px}
    }
    @keyframes protect-left{
        from{top: -10px;left:5px;}
        to{top: 7px;left: 18px}
    }
    .protect .left{
        top: -10px;left:5px;
        width: 24px;
        animation: protect-left 0.5s infinite linear;
        -webkit-animation:protect-left 0.5s infinite linear;
    }
    .protect .right{
        top: -10px;right:-5px;
        width: 15px;
        animation: protect-right 0.6s infinite linear;
        -webkit-animation:protect-right 0.5s infinite linear;
    }


    @keyframes signature{
        0%{    left: 30px;
            bottom: 29px;}
        25%{    left: 42px;
            bottom: 46px;}
        40%{    left: 47px;
            bottom: 32px;}
        65%{    left: 56px;
            bottom: 41px;}
        85%{left: 59px;
            bottom: 32px;}
        90%{    left: 64px;
            bottom: 35px;}
        100%{    left: 64px;
            bottom: 35px;}
    }
    @-webkit-keyframes signature {
        0%{    left: 30px;
            bottom: 29px;}
        25%{    left: 42px;
            bottom: 46px;}
        40%{    left: 47px;
            bottom: 32px;}
        65%{    left: 56px;
            bottom: 41px;}
        85%{left: 59px;
            bottom: 32px;}
        90%{    left: 64px;
            bottom: 35px;}
        100%{    left: 64px;
            bottom: 35px;}
    }
    .signature .pen{
        left: 30px;
        bottom: 29px;
        animation: signature 2s infinite linear;
        -webkit-animation:signature 2s infinite linear;
    }
}