body.loading .a-s-f, body.loading .a-s-f::after, body.loading .a-s-f::before {
    animation-duration: 1ms !important;
}

.frontpage.loading .animate, .frontpage.ready .animate {
    animation-fill-mode: backwards;
    opacity: 0;
}
.ready .animate.displayed {
    opacity: 1;
}

.animate {
    animation-timing-function: ease-out;
    animation-duration: 500ms;
    animation-delay: 50ms;
}

.ready .animate.displayed.fadeInUp {animation-name: fadeInUp;}
.ready .animate.displayed.fadeInLeft {animation-name: fadeInLeft;}
.ready .animate.displayed.fadeInRight {animation-name: fadeInRight;}
.ready .animate.displayed.slideUp {animation-name: slideUp;}
.ready .animate.displayed.fadeIn {animation-name: fadeIn;animation-timing-function: linear;}
.ready .animate.displayed.pop {animation-name: fadeIn;}

.not-front .animate {animation: none !important;}

.delay0 {animation-delay: 0;}
.delay50 {animation-delay: 50ms;}
.delay100 {animation-delay: 100ms;}
.delay150 {animation-delay: 150ms;}
.delay200 {animation-delay: 200ms;}
.delay300 {animation-delay: 300ms;}
.delay400 {animation-delay: 400ms;}
.delay500 {animation-delay: 500ms;}
.delay600 {animation-delay: 600ms;}
.delay800 {animation-delay: 800ms;}
.delay900 {animation-delay: 900ms;}
.delay1000 {animation-delay: 1000ms;}
.delay1100 {animation-delay: 1100ms;}
.delay1200 {animation-delay: 1200ms;}
.delay1400 {animation-delay: 1400ms;}
.delay1600 {animation-delay: 1600ms;}

.duration50 {animation-duration: 50ms;}
.duration100 {animation-duration: 100ms;}
.duration150 {animation-duration: 150ms;}
.duration200 {animation-duration: 200ms;}
.duration300 {animation-duration: 300ms;}
.duration400 {animation-duration: 400ms;}
.duration500 {animation-duration: 500ms;}

@media screen and (min-width: 1408px) {
    .ready .animate.displayed.fadeInFullHD {
        animation-name: fadeIn; 
        animation-timing-function: linear;
    }
    .ready .animate.displayed.noneFullHD {animation-name: none;}
    .delayFullHD0 {animation-delay: 0ms;}
    .delayFullHD400{animation-delay: 400ms;}
    .delayFullHD500{animation-delay: 500ms;}
    .delayFullHD600{animation-delay: 600ms;}
    .delayFullHD700{animation-delay: 700ms;}
    .delayFullHD800{animation-delay: 800ms;}
}

@media screen and (max-width: 768px) {
    .delayMobile0 {animation-delay:  0ms;}
    .delayMobile50 {animation-delay: 50ms;}
    .delayMobile100 {animation-delay: 100ms;}
    .delayMobile150 {animation-delay: 150ms;}
    .delayMobile200 {animation-delay: 200ms;}
    .delayMobile250 {animation-delay: 250ms;}
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        transform: translateY(20%) scale(0.95) rotate(2deg);
        opacity: 0;
    }
    100% {
        transform: translateY(0px) scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    0% {
        transform: translateX(20%) scale(0.95) rotate(-2deg);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    0% {
        transform: translateX(-20%) scale(0.95);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0
    }
    75% {
        opacity: 1;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        left: -100%;
        opacity: 0.1
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}

@keyframes slideOutRight {
    0% {
        left: 0;
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0.1;
    }
}

.shake-icon:hover > * {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
    transform: translateX(0);
}

.pulse-icon {
    animation: pulse 2000ms linear 1000ms infinite;
} 

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

@keyframes wave {
    0% {height: 10%; opacity: 0.4;}
    100% {height: 100%; opacity: 1;}
}

@keyframes pulse {
    0% {opacity: 1;}
    50% {opacity: 0.3;}
    100% {opacity: 1;}
}