.fade-in {
    opacity: 0;
    animation-name: fadeInAnime;
    animation-duration: 1s;

    animation-fill-mode: forwards;
}

.fade-out {
    opacity: 1;
    animation-name: fadeOutAnime;
    animation-duration: 1s;

    animation-fill-mode: forwards;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOutAnime {
    from {
        display: block;
        opacity: 1;
    }

    to {
        display: none;
        opacity: 0;
    }
}

.slide-in {
    animation-name: slideInAnime;
    animation-duration: .3s;

    animation-fill-mode: forwards;
}

.slide-out {
    animation-name: slideOutAnime;
    animation-duration: .3s;

    animation-fill-mode: forwards;
}

@keyframes slideInAnime {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes on-zoomin {
    0% {
        transform: scale(1);
    }

    33% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}


@keyframes pagein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes zoom-photo {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.loading-circle {
    font-size: 12px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: loading-circle-anime 1.1s infinite ease;
    animation: loading-circle-anime 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

@-webkit-keyframes loading-circle-anime {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #d6225c, 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.5), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.7), 1.8em -1.8em 0 0em #d6225c, 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.5), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.7), 2.5em 0em 0 0em #d6225c, 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.5), 2.5em 0em 0 0em rgba(214, 34, 92, 0.7), 1.75em 1.75em 0 0em #d6225c, 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.5), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.7), 0em 2.5em 0 0em #d6225c, -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.5), 0em 2.5em 0 0em rgba(214, 34, 92, 0.7), -1.8em 1.8em 0 0em #d6225c, -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.5), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.7), -2.6em 0em 0 0em #d6225c, -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.5), -2.6em 0em 0 0em rgba(214, 34, 92, 0.7), -1.8em -1.8em 0 0em #d6225c;
    }
}

@keyframes loading-circle-anime {

    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #d6225c, 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.5), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.7), 1.8em -1.8em 0 0em #d6225c, 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.5), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.7), 2.5em 0em 0 0em #d6225c, 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.5), 2.5em 0em 0 0em rgba(214, 34, 92, 0.7), 1.75em 1.75em 0 0em #d6225c, 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.5), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.7), 0em 2.5em 0 0em #d6225c, -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.2), -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.5), 0em 2.5em 0 0em rgba(214, 34, 92, 0.7), -1.8em 1.8em 0 0em #d6225c, -2.6em 0em 0 0em rgba(214, 34, 92, 0.2), -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.5), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.7), -2.6em 0em 0 0em #d6225c, -1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(214, 34, 92, 0.2), 1.8em -1.8em 0 0em rgba(214, 34, 92, 0.2), 2.5em 0em 0 0em rgba(214, 34, 92, 0.2), 1.75em 1.75em 0 0em rgba(214, 34, 92, 0.2), 0em 2.5em 0 0em rgba(214, 34, 92, 0.2), -1.8em 1.8em 0 0em rgba(214, 34, 92, 0.5), -2.6em 0em 0 0em rgba(214, 34, 92, 0.7), -1.8em -1.8em 0 0em #d6225c;
    }
}