.button_click_1 {

    -webkit-animation: button_click_1 0.3s ease;
    animation: button_click_1 0.3s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}


/*  стили при клике на кнопки начало */

/*  Использование


    <div class="btn_click wave left">ZORNET.RU</div>
    <div class="btn_click half-stroke left">ZORNET.RU #1</div>
    <div class="btn_click stroke left">ZORNET.RU #2</div>
    <div class="btn_click bubble left">ZORNET.RU #3</div>

    .btn.left:after ...

*/


.btn_click.left:after {
    left: 0;
}

.btn_click.right:after {
    right: 0;
}

.btn_click.wave:after {
    content: "";
    background: #f7f7f7;
    display: block;
    position: absolute;
    width: 200%;
    height: 200%;
    top: -5%;
    border-radius: 75px;
    margin-left: -28%;
    opacity: 0;
    transition: all 0.75s ease-in-out;
}

.btn_click.wave.right:after {
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    width: 200%;
    height: 200%;
    top: -5%;
    border-radius: 50px;
    margin-right: -30%;
    opacity: 0;
    transition: all 0.75s ease-in-out;
}

.btn_click.wave:active:after {
    width: 0px;
    opacity: 1;
    transition: 0s;
}

.btn_click.stroke:after {
    content: "";
    background: #fff;
    display: block;
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: all 0.75s ease-in-out;
}

.btn_click.stroke:active:after {
    width: 0px;
    opacity: 1;
    transition: 0s;
}

.btn_click.half-stroke:after {
    content: "";
    background: #f7f7f7;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: all 0.75s ease-in-out;
}

.btn_click.half-stroke:active:after {
    width: 0px;
    opacity: 2;
    transition: 0s;
}

.btn_click.bubble:after {
    content: "";
    background: #f9f9f9;
    position: absolute;
    width: 250px;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    margin: auto;
    border-radius: 75%;
    transform: scale(2);
    transition: all 0.75s ease-in-out;
}

.btn_click.bubble:active:after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}


/*  стили при клике на кнопки конец */


@keyframes top_bammer_9_det_hover {

    100% {
        transform: perspective(200px) rotate3d(1000, 0, 0, 10deg) scale(1.02);
    }

}

@keyframes top_bammer_9_det {

    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    10% {

        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        filter: blur(0px);
    }

    11% {

        -webkit-filter: blur(2px);
        -moz-filter: blur(2px);
        filter: blur(2px);
    }


    12% {

        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        filter: blur(0px);
    }

    30% {

        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        filter: blur(0px);
    }

    31% {

        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        filter: blur(3px);
    }


    32% {

        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
        filter: blur(0px);
    }


    40% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }

    43% {
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);
    }

    99% {
        -webkit-transform: rotateX(360deg);
        transform: rotateX(360deg);

    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
    }
}


@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 swing_left {
    15% {
        -webkit-transform: translateX(-9px);
        transform: translateX(-9px);
    }
    30% {
        -webkit-transform: translateX(0x);
        transform: translateX(0px);
    }
    40% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    50% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    65% {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0) scale(1.02);

    }
}


@keyframes swing_right {
    15% {
        -webkit-transform: translateX(9px);
        transform: translateX(9px);
    }
    30% {
        -webkit-transform: translateX(0x);
        transform: translateX(0px);
    }
    40% {
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    50% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    65% {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0) scale(1.02);

    }
}

@keyframes slow_show_and_move {
    0% {
        -webkit-transform: translateX(19px);
        transform: translateX(19px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: .95;
    }
}


@keyframes slow_show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: .95;
    }
}

@keyframes button_click_1 {
    50% {
        opacity: 0.6;
        -moz-transform: scale(0.95);
        -o-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes next_item {

    100% {
        opacity: 0;
        -webkit-transform: translateX(150px) scale(0);
        transform: translateX(150px) scale(0);
    }
}


@keyframes prev_item {

    100% {
        opacity: 0;
        -webkit-transform: translateX(-150px) scale(0);
        transform: translateX(-150px) scale(0);
    }
}


@keyframes show_up {

    0% {
        opacity: 0;
        -webkit-transform: translateX(-200px) scale(0);
        transform: translateX(-200px) scale(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0px) scale(1);
        transform: translateX(0px) scale(1);
    }
}

@keyframes show_up_2 {

    0% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1);
        filter: blur(50px);
        -webkit-filter: blur(50px);
        -moz-filter: blur(50px);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        filter: blur(0px);
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
    }
}

@keyframes show_up_3 {

    0% {

        filter: blur(50px);
        -webkit-filter: blur(50px);
        -moz-filter: blur(50px);
    }

    100% {

        filter: blur(0px);
        -webkit-filter: blur(0px);
        -moz-filter: blur(0px);
    }
}


@keyframes show_up_4 {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.show_up {

    -webkit-animation: show_up 0.7s ease;
    animation: show_up 0.7s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}

.show_up_2 {

    -webkit-animation: show_up_2 0.7s ease;
    animation: show_up_2 0.7s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}


.show_up_3 {

    -webkit-animation: show_up_3 0.7s ease;
    animation: show_up_3 0.7s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}

.show_up_4 {

    display: block !important;

    -webkit-animation: show_up_4 0.4s ease;
    animation: show_up_4 0.4s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}

.show_swing {

    -webkit-animation: swing 1.7s ease;
    animation: swing 1.7s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}


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


    }
}

.click_2 {

    -webkit-animation: click_2 0.3s ease;
    animation: click_2 0.3s ease !important;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}


@keyframes opacity_up_and_down_1 {

    0% {

        opacity: 0;

    }

    30% {

        opacity: 100;

    }

    70% {

        opacity: 100;

    }


    100% {

        opacity: 0;


    }
}


@keyframes opacity_down_1 {

    0% {

        opacity: 1;

    }


    100% {

        opacity: 0;


    }
}

.opacity_down_1 {

    -webkit-animation: opacity_down_1 0.3s ease;
    animation: opacity_down_1 0.3s ease !important;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;

}