/*<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>*/
.bell, .bell-border .bell .msgscrol .span
{
    z-index:99999999;
}
.bell, .bell-border {
    border-radius: 50%;
    position: absolute;
    top: 35%;
    left: 5%;
    transform: translate(-5%, -5%);
}
 .btn-bell {

    border-radius: 50%;

    position: absolute;

    top: 35%;

    left: 35%;

    transform: translate(-5%, -5%);

}

.bell {
    height: 60px;
    width: 60px;
    box-shadow: -1px 2px 10px #999;
    background-color: #ffc107;
    animation-name: col;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.bell-border {

    height: 59px; 

    width: 59px;

    border: 1px solid yellow !important;

    animation-name: bord-pop;

    animation-duration: 2s;

    animation-iteration-count: infinite;

    box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc;

}

.btn-bell {
    color: #80BB01;
    font-size: 20px;
    animation-name: bell-ring;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes bord-pop {

    0% {

        transform: translate(-5%, -5%);

    }

    50% {

        transform: translate(-5%, -5%) scale(1.9);

        opacity: 0.1;

    }

    100% {

        transform: translate(-5%, -5%) scale(1.9);

        opacity: 0;

    }

}

@keyframes col {

    0% {

        transform: scale(1) translate(0,0);

    }

    10% {

        transform: scale(1.1) translate(0,0);

    }

    75% {

        transform: scale(1) translate(0,0);

    }

    100% {

        transform: scale(1) translate(0,0);

    }

}

@keyframes bell-ring {

    0% {

        transform: translate(-5%, -5%);

    }

    5%, 15% {

        transform: translate(-5%, -5%) rotate(25deg);

    }

    10%, 20% {

        transform: translate(-5%, -5%) rotate(-25deg);

    }

    25%  {

        transform: translate(-5%, -5%) rotate(0deg);

    }

    100% {

        transform: translate(-5%, -5%) rotate(0deg);

    }

}
 
 
        @keyframes dotone {
            25% {
                transform: translateY(-25px)
            }

            65% {
                transform: translateY(8px)
            }

            80% {
                transform: translateY(0px)
            }
        }

.msgscrol {
    background-color: #ffc107;
    width: 150px;
    height: 30px;
    border-radius: 25px;
    overflow: hidden;
    position: absolute;
    top: -60%;
    left: -25%;
}

            .msgscrol span {
                font-family: 'BNazanin';
                font-size: 18px;
                color: black;
                display: block;
                white-space: nowrap;
                margin: 5px 0;
                animation: 8s txtscrl linear infinite;
            }

        @keyframes txtscrl {
            0% {
                transform: translateX(160px)
            }

            100% {
                transform: translateX(-160px)
            }
        }