.wiggle1 {
    animation: wiggle 0.7s infinite;
}

.wiggle2 {
    animation: wiggle 0.65s infinite;
}

.wiggle3 {
    animation: wiggle 0.63s infinite;
}

.wiggle4 {
    animation: wiggle 0.72s infinite;
}



@keyframes wiggle {
    0% {
        transform: translate(0.2px, 0.2px) rotate(0deg);
    }

    10% {
        transform: translate(-0.3px, -0.3px) rotate(-0.1deg);
    }

    20% {
        transform: translate(-0.4px, 0px) rotate(0.2deg);
    }

    30% {
        transform: translate(0.4px, 0.2px) rotate(0deg);
    }

    40% {
        transform: translate(0.1px, -0.1px) rotate(0.2deg);
    }

    50% {
        transform: translate(-0.2px, 0.3px) rotate(-0.1deg);
    }

    60% {
        transform: translate(-0.4px, 0.5px) rotate(0deg);
    }

    70% {
        transform: translate(0.2px, 0.1px) rotate(-0.2deg);
    }

    80% {
        transform: translate(-0.3px, -0.4px) rotate(0.1deg);
    }

    90% {
        transform: translate(0.1px, 0.2px) rotate(0deg);
    }

    100% {
        transform: translate(0.1px, -0.3px) rotate(-0.2deg);
    }
}

/*

OLD WIGGLE ANIMATION

@keyframes wiggle {
    0% {
        transform: translate(0.2px, 0.2px) rotate(0deg);
    }

    10% {
        transform: translate(-0.5px, -0.5px) rotate(-0.1deg);
    }

    20% {
        transform: translate(-0.7px, 0px) rotate(0.2deg);
    }

    30% {
        transform: translate(0.7px, 0.5px) rotate(0deg);
    }

    40% {
        transform: translate(0.2px, -0.2px) rotate(0.2deg);
    }

    50% {
        transform: translate(-0.2px, 0.5px) rotate(-0.2deg);
    }

    60% {
        transform: translate(-0.7px, 0.2px) rotate(0deg);
    }

    70% {
        transform: translate(0.7px, 0.2px) rotate(-0.2deg);
    }

    80% {
        transform: translate(-0.2px, -0.2px) rotate(0.2deg);
    }

    90% {
        transform: translate(0.2px, 0.5px) rotate(0deg);
    }

    100% {
        transform: translate(0.2px, -1px) rotate(-0.2deg);
    }
}

*/


.clipCircleUp {
    animation: clipCircleUp 2s;
}

.clipCircleDown {
    animation: clipCircleDown 1s;
}

@keyframes clipCircleUp {
    from {
        -webkit-clip-path: circle(0%);
        clip-path: circle(0%);
    }

    to {
        -webkit-clip-path: circle(100%);
        clip-path: circle(100%);
    }
}

@keyframes clipCircleDown {
    from {
        -webkit-clip-path: circle(100%);
        clip-path: circle(100%);
    }

    to {
        -webkit-clip-path: circle(0%);
        clip-path: circle(0%);
    }
}




@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        /*-webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);*/
    }

    50% {
        opacity: 1;
    }
}



@keyframes zoomIn {
    from {
        opacity: 0;
        /*-webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);*/
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.zoomInDelay {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}


@-webkit-keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        /*-webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);*/
    }

    to {
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        /* -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);*/
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
}