@keyframes docStepInFromRightKeyFrame{
    from {
        left: 100%;
    }

    to {
        left: 0;
    }
}

@keyframes docStepInFromLeftKeyFrame {
    from {
        right: 80%;
    }

    to {
        right: 0;
    }
}

@keyframes docStepOutFromRightKeyFrame {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

@keyframes docStepOutFromLeftKeyFrame {
    from {
        right: 0;
    }

    to {
        right: 100%;
    }
}



@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%, 100% {
        transform: rotateZ(0);
    }
}