
.bigonclick {
    display: inline-block;
}

.bigonclick.active {
    animation: bigonclick 0.6s ease;
    animation-iteration-count: 1;

}

@keyframes bigonclick {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(1.8);
        -o-transform: scale(1.8);
        -webkit-transform: scale(1.8);
        -ms-transform: scale(1.8);
        transform: scale(1.8);
        text-shadow: 0 0 12px #FFF;
    }
    100% {
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}


@-webkit-keyframes swing {
    15% {
        -webkit-transform: translateX(9px);
        transform: translateX(9px);
    }
    30% {
        -webkit-transform: translateX(-9px);
        transform: translateX(-9px);
    }
    40% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    50% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    65% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes swing {
    15% {
        -webkit-transform: translateX(9px);
        transform: translateX(9px);
    }
    30% {
        -webkit-transform: translateX(-9px);
        transform: translateX(-9px);
    }
    40% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    50% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    65% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes click_1 {

    0% {

        opacity: 1;
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    50% {

        opacity: 0.2;
        -moz-transform: scale(0.8);
        -o-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }


    100% {

        opacity: 1;
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.click_1 {

    -webkit-animation: click_1 0.3s ease;
    animation: click_1 0.3s ease !important;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}

@keyframes click_2 {

    0% {

        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);

    }

    50% {

        opacity: 0.2;
        filter: blur(10px);
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);

    }


    100% {

        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);


    }
}
