.noti{
    background: red !important;
    width: 20px ;
    height:  20px ;
    border: solid red 1px;
    border-radius:20px !important;
    position: absolute;
    z-index: 1;

}
.noti1{
    background: red;
    width: 20px ;
    border: solid red 1px;
    border-radius: 50px;
    position: absolute;
    z-index: 3  !important;
    margin-top: -15px;

}
.noti2{
    background: red;
    width: 20px ;
    border: solid red 1px;
    border-radius: 50px;
    position: absolute;
    z-index: 1 ;


}

.noti3{
    background: red;
    width:20px !important;
    height:20px;
    border: solid red 1px;
    border-radius: 50px;
    position: absolute;
    z-index: 1;
    margin-left: 82%;
    margin-top:5px;

}
.noti4{
    background: red;
    width: 20px ;
    border: solid red 1px;
    border-radius: 50px;
    position: absolute;
    z-index: 1;
    margin-top: -15px;

}


@media (min-width: 320px) {

    .noti{

        margin-left: 60% !important;

    }
    .noti2{

        margin-left: 60% !important;

    }
    .noti1{
        margin-left: -45%;
    }




}
@media (min-width: 340px) {

     .noti1{
        margin-left: 0%;
    }

}
@media (min-width: 425px) {
    .noti3{

        margin-left: 83%;
        margin-top:5px;

    }

    .noti{
        width: 30px ;
        height: 30px ;
     }
     .noti1{
        width: 30px ;
        height: 30px ;
     }
    .noti2{
       width: 30px ;
       height: 30px ;
    }
    .noti3{
        width: 30px ;
        height: 30px ;
     }
     .noti4{
        width: 30px ;
        height: 30px ;
     }



}
 

    @media (min-width: 768px) {
        .noti{
            margin-left: 11% ;
        }


    }

    @media (min-width: 1000px) {
        .as{
            width:55%;
            margin-top:5%;
        }

    }