/*
 * Copyright (C) Oleg Karakoz, Agile Apps. 2012-2025.
 * Project: mts
 * Last modified: 10/12/2019, 22:44
 */

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

.shaking-2 {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: 2;
}

.shaking {
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.5s;
    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

.shake-hover:hover {
    animation: shake-hover 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake-hover {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-2px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(2px, 0, 0);
    }
}

.zoom-in {
    transition: transform .2s; /* Animation */
}

.zoom-in:hover {
    transform: scale(1.07); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.blink {
    animation: blinker 0.3s linear;
}

@keyframes blinker {
    5%, 25%, 45%, 65%, 85%, 100% {
        opacity: 0;
    }
    10%, 30%, 50%, 70%, 90% {
        opacity: 1;
    }
}

@keyframes expand {
    0% {
        height: 0;
    }
    100% {
        height: 1000px;
    }
}

.blink-5 {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@keyframes blink-color {
    0% {
        color: orangered;
    }
    100% {
        color: #2196f3;
    }
}

@-webkit-keyframes blink-color {
    0% {
        color: orangered;
    }
    100% {
        color: #2196f3;
    }
}

.blink-color {
    -webkit-animation: blink-color 1s linear infinite;
    -moz-animation: blink-color 1s linear infinite;
    animation: blink-color 1s linear infinite;
}

.blink-color {
    -webkit-animation: blink-color 1s linear infinite;
    -moz-animation: blink-color 1s linear infinite;
    animation: blink-color 1s linear infinite;
}

.blink-fade {
    -webkit-animation: blink-fade 1s linear infinite;
    -moz-animation: blink-fade 1s linear infinite;
    animation: blink-fade 1s linear infinite;
}

@keyframes blink-fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}