/**
Animations
 */

.filters-menu-enter-active {
    animation: expandFilter 0.1s ease-in;
}

.filters-menu-leave-active {
    animation: expandFilter 0.1s reverse;
}

.loading-enter-active {
    animation: loading 0.5s ease-in;
}

.loading-menu-leave-active {
    animation: loading 0.5s reverse;
}

.slide-in-enter-active {
    animation: slideIn 0.3s ease-in-out;
}

.slide-in-leave-active {
    animation: slideIn 0.3s reverse;
}

.fadeIn-enter-active {
    animation: fadeIn 0.1s ease-in-out;
}

.fadeIn-leave-active {
    animation: fadeIn 0.1s reverse;
}

@keyframes rotateArrow {
    100% {
        transform: rotate(90deg);
    }
}

@keyframes loading {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

@keyframes expandFilter {
    0% {
        height: 0px;
        opacity: 0;
    }
    100% {
        height: auto;
        opacity: 100%;
    }
}

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

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

@keyframes slideIn {

    0% {
        transform: translateX(110%);
    }
    100% {
        transform: translateX(0%);
    }
}


@media (min-width: 320px) and (max-width: 480px) {

    @keyframes slideIn {

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

}


/**
  * Rays
  *
  * @author jh3y
*/
@-webkit-keyframes rays {
    from {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0); }
    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1); } }
@keyframes rays {
    from {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0); }
    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1); } }

.rays:after, .rays:before {
    border-radius: 100%;
    content: '';
    position: absolute; }

.rays:after {
    -webkit-animation: rays 1.5s infinite;
    animation: rays 1.5s infinite;
    border: 10px solid var(--primary);
    height: 100px;
    width: 100px; }

.rays:before {
    background: var(--primary);
    height: 20px;
    width: 20px; }