/* For Menu Icon */


.notification {
    text-decoration: none;
    padding: 1px 20px;
    position: relative;
    display: inline-block;
    border-radius: 2px;
}

    .notification .badge {
        position: absolute;
        top: -7px;
        right: 13px;
        padding: 6px 8px;
        border-radius: 50%;
        background: red;
        color: white;
        font-size:11px !important;
    }


@-webkit-keyframes bell-shake {
    1% {
        -webkit-transform: rotateZ(15deg);
        transform-origin: 50% 10%;
    }

    2% {
        -webkit-transform: rotateZ(-15deg);
        transform-origin: 50% 10%;
    }

    3% {
        -webkit-transform: rotateZ(20deg);
        transform-origin: 50% 10%;
    }

    4% {
        -webkit-transform: rotateZ(-20deg);
        transform-origin: 50% 10%;
    }

    5% {
        -webkit-transform: rotateZ(15deg);
        transform-origin: 50% 10%;
    }

    6% {
        -webkit-transform: rotateZ(-15deg);
        transform-origin: 50% 10%;
    }

    7% {
        -webkit-transform: rotateZ(0);
        transform-origin: 50% 10%;
    }

    100% {
        -webkit-transform: rotateZ(0);
        transform-origin: 50% 10%;
    }
}

@-moz-keyframes bell-shake {
    1% {
        -moz-transform: rotateZ(15deg);
        transform-origin: 50% 0%;
    }

    2% {
        -moz-transform: rotateZ(-15deg);
        transform-origin: 50% 0%;
    }

    3% {
        -moz-transform: rotateZ(20deg);
        transform-origin: 50% 0%;
    }

    4% {
        -moz-transform: rotateZ(-20deg);
        transform-origin: 50% 0%;
    }

    5% {
        -moz-transform: rotateZ(15deg);
        transform-origin: 50% 0%;
    }

    6% {
        -moz-transform: rotateZ(-15deg);
        transform-origin: 50% 0%;
    }

    7% {
        -moz-transform: rotateZ(0);
        transform-origin: 50% 0%;
    }

    100% {
        -moz-transform: rotateZ(0);
        transform-origin: 50% 0%;
    }
}

@keyframes bell-shake {
    1% {
        transform: rotateZ(15deg);
        transform-origin: 50% 0%;
    }

    2% {
        transform: rotateZ(-15deg);
        transform-origin: 50% 0%;
    }

    3% {
        transform: rotateZ(20deg);
        transform-origin: 50% 0%;
    }

    4% {
        transform: rotateZ(-20deg);
        transform-origin: 50% 0%;
    }

    5% {
        transform: rotateZ(15deg);
        transform-origin: 50% 0%;
    }

    6% {
        transform: rotateZ(-15deg);
        transform-origin: 50% 0%;
    }

    7% {
        transform: rotateZ(0);
        transform-origin: 50% 0%;
    }

    100% {
        transform: rotateZ(0);
        transform-origin: 50% 0%;
    }
}

/* Bell shake */
.bell-shake--hover:hover,
.bell-shake--hover:focus,
.bell-shake {
    -webkit-animation: bell-shake 10s ease infinite;
    -moz-animation: bell-shake 10s ease infinite;
    animation: bell-shake 10s ease infinite;
}

.bell-shake-delay {
    -webkit-animation: bell-shake 10s ease 3s infinite;
    -moz-animation: bell-shake 10s ease 3s infinite;
    animation: bell-shake 10s ease 3s infinite;
}