.animated-300 {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-duration:300ms;
}
.animation-delay-5000 {
    animation-delay: 5s;
}

.infinite {
    animation-iteration-count:infinite;
}

.isTyping span {
    display:inline-block;
    margin-right:3px;
    width:8px;
    height:8px;
    background-color:#c2c2c2;
    border-radius:50%;
    animation: isTyping ease-in-out 1000ms infinite;
}
.isTyping span:nth-child(2) {
    animation-delay: 100ms;
}
.isTyping span:nth-child(3) {
    animation-delay: 200ms;
}

.notify {
   
}

.changingOrder {
    animation: changingOrder 2000ms linear;
}

.rotateZ {
    animation: rotateZ linear 1500ms infinite;
}

.border{
    /*animation: border linear 1000ms infinite;*/
}

.pop {
    display:block;
    animation: pop ease-in 300ms;
}

/*#region Clock */
@keyframes rota {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fill {
  0%        { opacity: 0; }
  50%, 100% { opacity: 1; }
}
@keyframes mask {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}
/*#endregion */

@keyframes pop {
    0% {        
        transform:scale(0);
    }
    80% {
        transform:scale(1.2);
    }
    100% {
        transform:scale(1);
    }
}

@keyframes border {
    0% {
       border-color:#91ddf3;
    }
    50%{
       border-color:#6dbcd3;
    }
    100% {        
       border-color:#91ddf3;
    }
}

@keyframes notify {
    0% {
        box-shadow: rgba(255, 0, 0, 0.6) 0 0 0 0;
    }
    100% {
        box-shadow: transparent 0 0 0 10px;
    }
}

@keyframes isTyping {
    0% {
        transform:translateY(0)
    }

    30% {
        transform:translateY(-8px)
    }

    50% {        
        transform:translateY(0)
    }
    100% {
        transform:translateY(0)
    }
}

@keyframes menuItemSelected {
    0% {
        transform:rotateY(0) scale(1);
    }
    50%{
        transform:rotateY(180deg) scale(1.5);
    }
    100% {
        transform:rotateY(360deg) scale(1);
    }
}

@keyframes changingOrder {
    0% {
        background-color:#91ddf3;
    }
    80%{
        background-color:#91ddf3;
    }
    100% {
        background-color:none;
    }
}

@keyframes rotateZ {
    0% {
        transform:rotateZ(0) scale(1);        
    }

    50%{
        /*transform:rotateZ(180deg) scale(1.2);*/
    }

    100% {
        transform:rotateZ(360deg) scale(1);
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0);
        width: 250px;
        height: 250px;
    }

    50% {
        transform: translateY(30px);
    }

    55% {
        width: 260px;
        height: 240px;
    }

    70% {
        width: 250px;
        height: 250px;
    }

    100% {
        transform: translateY(0);
    }
}