/*orbit*/
.orbit {
    -webkit-animation: orbit 3s;
    animation: orbit 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(1vw) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(1vw) rotate(-360deg);
    }
}

@-webkit-keyframes orbit {
    0% {
        -webkit-transform: rotate(0deg) translateX(1vw) rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg) translateX(1vw) rotate(-360deg);
    }
}

/*float*/
.float-infinite {
    -webkit-animation: float 1.6s infinite;
    animation: float 1.6s infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}




/*wabble*/
.wabble:hover, .wabble:active, .wabble:focus {
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
    -webkit-animation: wabble 1.2s;
    animation: wabble 1.2s;
}

.wabble-infinite {
    -webkit-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
    -webkit-animation: wabble 2.5s infinite;
    animation: wabble 2.5s infinite;
}

@keyframes wabble {
    0% {
        transform: rotateZ(-5deg);
    }

    50% {
        transform: rotateZ(5deg);
    }

    100% {
        transform: rotateZ(-5deg);
    }
}

@-webkit-keyframes wabble {
    0% {
        transform: rotateZ(-5deg);
    }

    50% {
        transform: rotateZ(5deg);
    }

    100% {
        transform: rotateZ(-5deg);
    }
}

/* Pop */
@-webkit-keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes hvr-pop {
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

.hvr-pop {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
        -webkit-animation-name: hvr-pop;
        animation-name: hvr-pop;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

@media only screen and (min-width:1200px) {
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-8px);
        }
    }

    @-webkit-keyframes float {
        0%, 100% {
            -webkit-transform: translateY(0);
        }

        50% {
            -webkit-transform: translateY(-8px);
        }
    }

    /* Buzz Out */
    @-webkit-keyframes hvr-buzz-out {
        10% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        20% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        30% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        40% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        50% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        60% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        70% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        80% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        90% {
            -webkit-transform: translateX(1px) rotate(0);
            transform: translateX(1px) rotate(0);
        }

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

    @keyframes hvr-buzz-out {
        10% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        20% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        30% {
            -webkit-transform: translateX(3px) rotate(2deg);
            transform: translateX(3px) rotate(2deg);
        }

        40% {
            -webkit-transform: translateX(-3px) rotate(-2deg);
            transform: translateX(-3px) rotate(-2deg);
        }

        50% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        60% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        70% {
            -webkit-transform: translateX(2px) rotate(1deg);
            transform: translateX(2px) rotate(1deg);
        }

        80% {
            -webkit-transform: translateX(-2px) rotate(-1deg);
            transform: translateX(-2px) rotate(-1deg);
        }

        90% {
            -webkit-transform: translateX(1px) rotate(0);
            transform: translateX(1px) rotate(0);
        }

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

    .hvr-buzz-out {
        /*display: inline-block;
        vertical-align: middle;*/
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-buzz-out:hover, .hvr-buzz-out:focus, .hvr-buzz-out:active {
            -webkit-animation-name: hvr-buzz-out;
            animation-name: hvr-buzz-out;
            -webkit-animation-duration: 0.75s;
            animation-duration: 0.75s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
            color: #00b4d4;
        }

    /* Pulse Shrink */
    @-webkit-keyframes hvr-pulse-shrink {
        to {
            -webkit-transform: scale(0.95);
            transform: scale(0.95);
        }
    }

    @keyframes hvr-pulse-shrink {
        to {
            -webkit-transform: scale(0.95);
            transform: scale(0.95);
        }
    }

    .hvr-pulse-shrink {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active {
            -webkit-animation-name: hvr-pulse-shrink;
            animation-name: hvr-pulse-shrink;
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            animation-direction: alternate;
        }


    /* Bounce in */
    .hvr-bounce-in {
        /*display: inline-block;
        vertical-align: middle;*/
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        /*box-shadow: 0 0 1px rgba(0, 0, 0, 0);*/
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }

        .hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
            -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
            transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
        }

    /* Bounce Out */
    .hvr-bounce-out {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }

        .hvr-bounce-out:hover, .hvr-bounce-out:focus, .hvr-bounce-out:active {
            -webkit-transform: scale(0.95);
            transform: scale(0.95);
            -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
            transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
        }


    @keyframes horizontal-move {
        16.65% {
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }

        33.3% {
            -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
        }

        49.95% {
            -webkit-transform: translateX(4px);
            transform: translateX(4px);
        }

        66.6% {
            -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
        }

        83.25% {
            -webkit-transform: translateX(1px);
            transform: translateX(1px);
        }

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

    .item1 {
        animation: horizontal-move 3s ease-in-out infinite;
    }

    .item2 {
        animation: horizontal-move 3s ease-in-out 0.3s infinite;
    }

    .item3 {
        animation: horizontal-move 3s ease-in-out 0.6s infinite;
    }

    .item4 {
        animation: horizontal-move 3s ease-in-out 0.9s infinite;
    }

    @-webkit-keyframes hvr-pulse {
        25% {
            -webkit-transform: scale(1.02);
            transform: scale(1.02);
        }

        75% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes hvr-pulse {
        25% {
            -webkit-transform: scale(1.02);
            transform: scale(1.02);
        }

        75% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    .hvr-pulse {
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
            -webkit-animation-name: hvr-pulse;
            animation-name: hvr-pulse;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

    /* Wobble Horizontal */
    @-webkit-keyframes hvr-wobble-horizontal {
        16.65% {
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }

        33.3% {
            -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
        }

        49.95% {
            -webkit-transform: translateX(4px);
            transform: translateX(4px);
        }

        66.6% {
            -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
        }

        83.25% {
            -webkit-transform: translateX(1px);
            transform: translateX(1px);
        }

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

    @keyframes hvr-wobble-horizontal {
        16.65% {
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }

        33.3% {
            -webkit-transform: translateX(-6px);
            transform: translateX(-6px);
        }

        49.95% {
            -webkit-transform: translateX(4px);
            transform: translateX(4px);
        }

        66.6% {
            -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
        }

        83.25% {
            -webkit-transform: translateX(1px);
            transform: translateX(1px);
        }

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

    .hvr-wobble-horizontal {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
            -webkit-animation-name: hvr-wobble-horizontal;
            animation-name: hvr-wobble-horizontal;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }

    /* Wobble To Top Right */
    @-webkit-keyframes hvr-wobble-to-top-right {
        16.65% {
            -webkit-transform: translate(8px, -8px);
            transform: translate(8px, -8px);
        }

        33.3% {
            -webkit-transform: translate(-6px, 6px);
            transform: translate(-6px, 6px);
        }

        49.95% {
            -webkit-transform: translate(4px, -4px);
            transform: translate(4px, -4px);
        }

        66.6% {
            -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
        }

        83.25% {
            -webkit-transform: translate(1px, -1px);
            transform: translate(1px, -1px);
        }

        100% {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }
    }

    @keyframes hvr-wobble-to-top-right {
        16.65% {
            -webkit-transform: translate(8px, -8px);
            transform: translate(8px, -8px);
        }

        33.3% {
            -webkit-transform: translate(-6px, 6px);
            transform: translate(-6px, 6px);
        }

        49.95% {
            -webkit-transform: translate(4px, -4px);
            transform: translate(4px, -4px);
        }

        66.6% {
            -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
        }

        83.25% {
            -webkit-transform: translate(1px, -1px);
            transform: translate(1px, -1px);
        }

        100% {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }
    }

    .hvr-wobble-to-top-right {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-wobble-to-top-right:hover, .hvr-wobble-to-top-right:focus, .hvr-wobble-to-top-right:active {
            -webkit-animation-name: hvr-wobble-to-top-right;
            animation-name: hvr-wobble-to-top-right;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }

    /* Wobble To Bottom Right */
    @-webkit-keyframes hvr-wobble-to-bottom-right {
        16.65% {
            -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px);
        }

        33.3% {
            -webkit-transform: translate(-6px, -6px);
            transform: translate(-6px, -6px);
        }

        49.95% {
            -webkit-transform: translate(4px, 4px);
            transform: translate(4px, 4px);
        }

        66.6% {
            -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
        }

        83.25% {
            -webkit-transform: translate(1px, 1px);
            transform: translate(1px, 1px);
        }

        100% {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }
    }

    @keyframes hvr-wobble-to-bottom-right {
        16.65% {
            -webkit-transform: translate(8px, 8px);
            transform: translate(8px, 8px);
        }

        33.3% {
            -webkit-transform: translate(-6px, -6px);
            transform: translate(-6px, -6px);
        }

        49.95% {
            -webkit-transform: translate(4px, 4px);
            transform: translate(4px, 4px);
        }

        66.6% {
            -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
        }

        83.25% {
            -webkit-transform: translate(1px, 1px);
            transform: translate(1px, 1px);
        }

        100% {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
        }
    }

    .hvr-wobble-to-bottom-right {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-wobble-to-bottom-right:hover, .hvr-wobble-to-bottom-right:focus, .hvr-wobble-to-bottom-right:active {
            -webkit-animation-name: hvr-wobble-to-bottom-right;
            animation-name: hvr-wobble-to-bottom-right;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }


    /* Wobble Top */
    @-webkit-keyframes hvr-wobble-top {
        16.65% {
            -webkit-transform: skew(-12deg);
            transform: skew(-12deg);
        }

        33.3% {
            -webkit-transform: skew(10deg);
            transform: skew(10deg);
        }

        49.95% {
            -webkit-transform: skew(-6deg);
            transform: skew(-6deg);
        }

        66.6% {
            -webkit-transform: skew(4deg);
            transform: skew(4deg);
        }

        83.25% {
            -webkit-transform: skew(-2deg);
            transform: skew(-2deg);
        }

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

    @keyframes hvr-wobble-top {
        16.65% {
            -webkit-transform: skew(-12deg);
            transform: skew(-12deg);
        }

        33.3% {
            -webkit-transform: skew(10deg);
            transform: skew(10deg);
        }

        49.95% {
            -webkit-transform: skew(-6deg);
            transform: skew(-6deg);
        }

        66.6% {
            -webkit-transform: skew(4deg);
            transform: skew(4deg);
        }

        83.25% {
            -webkit-transform: skew(-2deg);
            transform: skew(-2deg);
        }

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

    .hvr-wobble-top {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }

        .hvr-wobble-top:hover, .hvr-wobble-top:focus, .hvr-wobble-top:active {
            -webkit-animation-name: hvr-wobble-top;
            animation-name: hvr-wobble-top;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }

    /* Shadow */
    .hvr-shadow {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: box-shadow;
        transition-property: box-shadow;
    }

        .hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
            box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
        }

    /* Push */
    @-webkit-keyframes hvr-push {
        50% {
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes hvr-push {
        50% {
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    .hvr-push {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-push:hover, .hvr-push:focus, .hvr-push:active {
            -webkit-animation-name: hvr-push;
            animation-name: hvr-push;
            -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
        }

    /* Grow */
    .hvr-grow {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
    }

        .hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

    /* Shrink */
    .hvr-shrink {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform;
        transition-property: transform;
    }

        .hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
            -webkit-transform: scale(0.9);
            transform: scale(0.9);
        }

    /* Hang */
    @-webkit-keyframes hvr-hang {
        0% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }

        50% {
            -webkit-transform: translateY(4px);
            transform: translateY(4px);
        }

        100% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }
    }

    @keyframes hvr-hang {
        0% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }

        50% {
            -webkit-transform: translateY(4px);
            transform: translateY(4px);
        }

        100% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }
    }

    @-webkit-keyframes hvr-hang-sink {
        100% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }
    }

    @keyframes hvr-hang-sink {
        100% {
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }
    }

    .hvr-hang {
        display: inline-block;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    }

        .hvr-hang:hover, .hvr-hang:focus, .hvr-hang:active {
            -webkit-animation-name: hvr-hang-sink, hvr-hang;
            animation-name: hvr-hang-sink, hvr-hang;
            -webkit-animation-duration: .3s, 1.5s;
            animation-duration: .3s, 1.5s;
            -webkit-animation-delay: 0s, .3s;
            animation-delay: 0s, .3s;
            -webkit-animation-timing-function: ease-out, ease-in-out;
            animation-timing-function: ease-out, ease-in-out;
            -webkit-animation-iteration-count: 1, infinite;
            animation-iteration-count: 1, infinite;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            -webkit-animation-direction: normal, alternate;
            animation-direction: normal, alternate;
        }

    /*stretch*/
    .stretch:hover, .stretch:focus, .stretch:active {
        -webkit-animation: stretch 1s;
        animation: stretch 1s;
    }

    @keyframes stretch {
        0%, 100% {
            transform: scale3d(1, 1, 1);
        }

        30% {
            transform: scale3d(1.3, .7, 1);
        }

        40% {
            transform: scale3d(.7, 1.3, 1);
        }

        60% {
            transform: scale3d(1.2, .8, 1);
        }

        75% {
            transform: scale3d(.8, 1.2, 1);
        }

        90% {
            transform: scale3d(1.05, .95, 1);
        }
    }

    @-webkit-keyframes stretch {
        0%, 100% {
            -webkit-transform: scale3d(1, 1, 1);
        }

        30% {
            -webkit-transform: scale3d(1.3, .7, 1);
        }

        40% {
            -webkit-transform: scale3d(.7, 1.3, 1);
        }

        60% {
            -webkit-transform: scale3d(1.2, .8, 1);
        }

        75% {
            -webkit-transform: scale3d(.8, 1.2, 1);
        }

        90% {
            -webkit-transform: scale3d(1.05, .95, 1);
        }
    }

    /*fanfare .stretch:hover, .stretch:focus, .stretch:active*/
    .fanfare:hover, .fanfare:focus, .fanfare:active {
        -webkit-animation: fanfare 1.2s;
        animation: fanfare 1.2s;
    }

    .fanfare-infinite {
        -webkit-animation: fanfare 3s infinite;
        animation: fanfare 3s infinite;
    }

    @keyframes fanfare {
        0%, 100% {
            transform: scale(1);
        }

        30% {
            transform: scale(.8) rotateZ(5deg);
        }

        40%, 60%, 80% {
            transform: scale(1.05) rotateZ(-5deg);
        }

        50%, 70%, 90% {
            transform: scale(1.05) rotateZ(5deg);
        }
    }

    @-webkit-keyframes fanfare {
        0%, 100% {
            -webkit-transform: scale(1);
        }

        30% {
            -webkit-transform: scale(.8) rotateZ(5deg);
        }

        40%, 60%, 80% {
            -webkit-transform: scale(1.05) rotateZ(-5deg);
        }

        50%, 70%, 90% {
            -webkit-transform: scale(1.05) rotateZ(5deg);
        }
    }

    /*flip*/
    .flip:hover, .flip:active, .flip:focus {
        -webkit-animation: flip 1.3s;
        animation: flip 1.3s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    .flip-infinite {
        -webkit-animation: flip 1.3s infinite;
        animation: flip 1.3s infinite;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    @keyframes flip {
        0% {
            transform: rotateY(-360deg);
        }

        40% {
            transform: scale(1.6) rotateY(-190deg);
        }

        50% {
            transform: scale(1.6) rotateY(-150deg);
        }

        80% {
            transform: scale(.95);
        }

        100% {
            transform: scale(1);
        }
    }

    @-webkit-keyframes flip {
        0% {
            -webkit-transform: perspective(500px) rotateX(70deg);
            opacity: .2;
        }

        30% {
            -webkit-transform: perspective(500px) rotateX(-50deg);
        }

        45% {
            -webkit-transform: perspective(500px) rotateX(30deg);
        }

        65% {
            -webkit-transform: perspective(500px) rotateX(-20deg);
        }

        85% {
            -webkit-transform: perspective(500px) rotateX(10deg);
        }

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

    

    /*rotate*/
    .rotate:hover, .rotate:active, .rotate:focus {
        -webkit-animation: rotate 1s;
        animation: rotate 1s;
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    /*heartbeat*/
    .heartbeat:hover, .heartbeat:active, .heartbeat:focus {
        -webkit-animation: heartbeat 8s;
        animation: heartbeat 8s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .heartbeat-infinite {
        -webkit-animation: heartbeat 8s;
        animation: heartbeat 8s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    @keyframes heartbeat {
        0%, 20%, 40%, 60%, 80%, 100% {
            transform: scale(1);
        }

        10%, 30%, 50%, 70%, 90% {
            transform: scale(1.15);
        }
    }

    @-webkit-keyframes heartbeat {
        0%, 20%, 40%, 60%, 80%, 100% {
            -webkit-transform: scale(1);
        }

        10%, 30%, 50%, 70%, 90% {
            -webkit-transform: scale(1.15);
        }
    }

    /*bounce*/
    .bounce:hover, .bounce:active, .bounce:focus {
        -webkit-animation: bounce 1s;
        animation: bounce 1s;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    @keyframes bounce {
        0%, 30%, 55%, 70%, 80%, 90%, 100% {
            transform: translateY(0px);
        }

        25% {
            transform: translateY(-50px);
        }

        45% {
            transform: translateY(-25px);
        }

        63% {
            transform: translateY(-15px);
        }

        75% {
            transform: translateY(-7px);
        }

        85% {
            transform: translateY(-4px);
        }

        95% {
            transform: translateY(-2px);
        }
    }

    @-webkit-keyframes bounce {
        0%, 30%, 55%, 70%, 80%, 90%, 100% {
            -webkit-transform: translateY(0px);
        }

        25% {
            -webkit-transform: translateY(-50px);
        }

        45% {
            -webkit-transform: translateY(-25px);
        }

        63% {
            -webkit-transform: translateY(-15px);
        }

        75% {
            -webkit-transform: translateY(-7px);
        }

        85% {
            -webkit-transform: translateY(-4px);
        }

        95% {
            -webkit-transform: translateY(-2px);
        }
    }

    

    

    /*clip-x-in*/
    .clip-x-infinite {
        -webkit-animation: clip-xy 5s infinite;
        animation: clip-xy 5s infinite;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    @keyframes clip-xy {
        0% {
            transform: scale(.9, .9);
        }

        25% {
            transform: scale(1, .9);
        }

        50% {
            transform: scale(1, 1);
        }

        75% {
            transform: scale(1, .9);
        }

        100% {
            transform: scale(.9, .9);
        }
    }

    @-webkit-keyframes clip-xy {
        0% {
            -webkit-transform: scale(0, .9);
        }

        50% {
            -webkit-transform: scale(1, .9);
        }

        50% {
            transform: scale(1, 1);
        }

        75% {
            -webkit-transform: scale(1, .9);
        }

        100% {
            -webkit-transform: scale(0, .9);
        }
    }
}

@media only screen and (max-width:768px){
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-3px);
        }
    }

    @-webkit-keyframes float {
        0%, 100% {
            -webkit-transform: translateY(0);
        }

        50% {
            -webkit-transform: translateY(-3px);
        }
    }
}