.transparency-animation-4s {
    animation: transparently 4s 5;
}

.red-background-animation-4s {
    animation: flashRedBackground 4s 5;
}

.green-background-animation-4s {
    animation: flashGreenBackground 4s 5;
}

.yellow-background-animation-4s {
    animation: flashYellowBackground 4s 5;
}

.animation-border-btn {
    animation: col 3s infinite;
}

.animation-ring-btn {
    animation: bell-ring 3s infinite;
}

@keyframes transparently {
    0% {
        opacity: 1.1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1.1;
    }
}

@keyframes flashRedBackground {
    0% {
        background-color: white;
    }
    50% {
        background-color: #d54545;
    }
    100% {
        background-color: white;
    }
}

@keyframes flashYellowBackground {
    0% {
        background-color: white;
    }
    50% {
        background-color: #ff9900;
    }
    100% {
        background-color: white;
    }
}

@keyframes flashGreenBackground {
    0% {
        background-color: white;
    }
    50% {
        background-color: darkgreen;
    }
    100% {
        background-color: white;
    }
}

@keyframes flashWhiteColor {
    0% {
        color: #337ab7;
    }
    50% {
        color: #fff;
    }
    100% {
        color: #337ab7;
    }
}
@keyframes bord-pop {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0.1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0;
    }
}
@keyframes col {
    0% {
        border: 1px solid #ef7575 !important;
        box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #ccc ;
        transform: scale(1) translate(0,0);
    }
    10% {
        border: 1px solid #ef7575 !important;
        box-shadow: 2px 2px 5px #adadad, -2px -2px 5px #adadad ;
        transform: scale(1.1) translate(0,0);
    }
    75% {
        border: 1px solid #ef7575 !important;
        box-shadow: 2px 2px 5px #bdbcbc, -2px -2px 5px #bdbcbc;
        transform: scale(1) translate(0,0);
    }
    100% {
        transform: scale(1) translate(0,0);
    }
}
@keyframes bell-ring {

    5%, 15% {
        transform:  rotate(25deg);
    }
    10%, 20% {
        transform:  rotate(-25deg);
    }
    25%  {
        transform:  rotate(0deg);
    }
    100% {
        transform:  rotate(0deg);
    }
}