.animista-variables {
    --text-pop-up-top-text-shadow: 0 1px 0 var(--grey-darker), 0 2px 0 var(--grey-darker), 0 3px 0 , 0 4px 0 var(--grey-darker), 0 5px 0 var(--grey-darker), 0 6px 0 var(--grey-darker), 0 7px 0 var(--grey-darker), 0 8px 0 var(--grey-darker), 0 9px 0 var(--grey-darker), 0 50px 30px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------------
 * Generated by Animista on 2019-9-12 19:51:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation fade-in-top
 * ----------------------------------------
 */
.fade-in-top {
    --fade-in-top-translate-y: -8vmin;
    -webkit-animation: fade-in-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(var(--fade-in-top-translate-y));
        transform: translateY(var(--fade-in-top-translate-y));
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-top {
    0% {
        -webkit-transform: translateY(var(--fade-in-top-translate-y));
        transform: translateY(var(--fade-in-top-translate-y));
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation fade-in-top-position
 * ----------------------------------------
 */
.fade-in-top-position {
    --fade-in-top-position: -8vmin;
    -webkit-animation: fade-in-top-position 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-top-position 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-top-position {
    0% {
        top: var(--fade-in-top-position);
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}
@keyframes fade-in-top-position {
    0% {
        top: var(--fade-in-top-position);
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
.fade-in-bottom {
    --fade-in-bottom-translate-y: 50px;
    --fade-in-bottom-duration: 600ms;
    -webkit-animation: fade-in-bottom var(--fade-in-bottom-duration) cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom var(--fade-in-bottom-duration) cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(var(--fade-in-bottom-translate-y));
        transform: translateY(var(--fade-in-bottom-translate-y));
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(var(--fade-in-bottom-translate-y));
        transform: translateY(var(--fade-in-bottom-translate-y));
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation fade-out-top
 * ----------------------------------------
 */
.fade-out-top {
    --fade-out-top-translate-y: -50px;
    -webkit-animation: fade-out-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-out-top 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes fade-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(var(--fade-out-top-translate-y));
        transform: translateY(var(--fade-out-top-translate-y));
        opacity: 0;
    }
}
@keyframes fade-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(var(--fade-out-top-translate-y));
        transform: translateY(var(--fade-out-top-translate-y));
        opacity: 0;
    }
}


/**
 * ----------------------------------------
 * animation fade-out-bottom
 * ----------------------------------------
 */
.fade-out-bottom {
    --fade-out-bottom-translate-y: 50px;
    -webkit-animation: fade-out-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-out-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes fade-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(var(--fade-out-bottom-translate-y));
        transform: translateY(var(--fade-out-bottom-translate-y));
        opacity: 0;
    }
}
@keyframes fade-out-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(var(--fade-out-bottom-translate-y));
        transform: translateY(var(--fade-out-bottom-translate-y));
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
.fade-in {
    --fade-in-opacity-from: 0;
    --fade-in-opacity-to: 1;
    --fade-in-duration: 0.5s;
    --fade-in-delay: 0ms;
    -webkit-animation: fade-in var(--fade-in-duration) var(--fade-in-delay) cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in var(--fade-in-duration) var(--fade-in-delay) cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in {
    0% {
        opacity: var(--fade-in-opacity-from, 0);
    }
    100% {
        opacity: var(--fade-in-opacity-to, 1);
    }
}
@keyframes fade-in {
    0% {
        opacity: var(--fade-in-opacity-from, 0);
    }
    100% {
        opacity: var(--fade-in-opacity-to, 1);
    }
}

/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
.fade-out {
    --fade-out-duration: 0.5s;
    -webkit-animation: fade-out var(--fade-out-duration) cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-out var(--fade-out-duration) cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.flip-in-hor-bottom {
    -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: flip-in-hor-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes flip-in-hor-bottom {
    0% {
        -webkit-transform: rotateX(80deg);
        transform: rotateX(80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}
@keyframes flip-in-hor-bottom {
    0% {
        -webkit-transform: rotateX(80deg);
        transform: rotateX(80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

.flip-in-hor-top {
    -webkit-animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: flip-in-hor-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes flip-in-hor-top {
    0% {
        -webkit-transform: rotateX(-80deg);
        transform: rotateX(-80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}
@keyframes flip-in-hor-top {
    0% {
        -webkit-transform: rotateX(-80deg);
        transform: rotateX(-80deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
.slide-in-left {
    --slide-in-left-translateX: -1000px;
    --slide-in-left-translateX-end: 0;
    --slide-in-left-opacity-start: 0;
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(var(--slide-in-left-translateX));
        transform: translateX(var(--slide-in-left-translateX));
        opacity: var(--slide-in-left-opacity-start);
    }
    100% {
        -webkit-transform: translateX(var(--slide-in-left-translateX-end));
        transform: translateX(var(--slide-in-left-translateX-end));
        opacity: 1;
    }
}
@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(var(--slide-in-left-translateX));
        transform: translateX(var(--slide-in-left-translateX));
        opacity: var(--slide-in-left-opacity-start);
    }
    100% {
        -webkit-transform: translateX(var(--slide-in-left-translateX-end));
        transform: translateX(var(--slide-in-left-translateX-end));
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
.slide-in-right {
    --slide-in-right-translateX: 1000px;
    --slide-in-right-translateX-end: 0;
    --slide-in-right-opacity-start: 0;
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(var(--slide-in-right-translateX));
        transform: translateX(var(--slide-in-right-translateX));
        opacity: var(--slide-in-right-opacity-start);
    }
    100% {
        -webkit-transform: translateX(var(--slide-in-right-translateX-end));
        transform: translateX(var(--slide-in-right-translateX-end));
        opacity: 1;
    }
}
@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(var(--slide-in-right-translateX));
        transform: translateX(var(--slide-in-right-translateX));
        opacity: var(--slide-in-right-opacity-start);
    }
    100% {
        -webkit-transform: translateX(var(--slide-in-right-translateX-end));
        transform: translateX(var(--slide-in-right-translateX-end));
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation slide-out-left
 * ----------------------------------------
 */
.slide-out-left {
    --slide-out-left-translateX: -1000px;
    -webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(var(--slide-out-left-translateX));
        transform: translateX(var(--slide-out-left-translateX));
        opacity: 0;
    }
}
@keyframes slide-out-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(var(--slide-out-left-translateX));
        transform: translateX(var(--slide-out-left-translateX));
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation slide-out-right
 * ----------------------------------------
 */
.slide-out-right {
    --slide-out-right-translateX: 1000px;
    -webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(var(--slide-out-right-translateX));
        transform: translateX(var(--slide-out-right-translateX));
        opacity: 0;
    }
}
@keyframes slide-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(var(--slide-out-right-translateX));
        transform: translateX(var(--slide-out-right-translateX));
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
.slide-in-top {
    --slide-in-top-translateY: 1000px;
    --slide-in-top-translateX-end: 0;
    --slide-in-top-opacity-start: 0;
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(var(--slide-in-top-translateY));
        transform: translateY(var(--slide-in-top-translateY));
        opacity: var(--slide-in-top-opacity-start);
    }
    100% {
        -webkit-transform: translateY(var(--slide-in-top-translateX-end));
        transform: translateY(var(--slide-in-top-translateX-end));
        opacity: 1;
    }
}
@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(var(--slide-in-top-translateY));
        transform: translateY(var(--slide-in-top-translateY));
        opacity: var(--slide-in-top-opacity-start);
    }
    100% {
        -webkit-transform: translateY(var(--slide-in-top-translateX-end));
        transform: translateY(var(--slide-in-top-translateX-end));
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation slide-in-blurred-top
 * ----------------------------------------
 */
.slide-in-blurred-top {
    -webkit-animation: slide-in-blurred-top 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.1) both;
    animation: slide-in-blurred-top 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.1) both;
}
@-webkit-keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-500px) scaleY(2.5) scaleX(0.2);
        transform: translateY(-500px) scaleY(2.5) scaleX(0.2);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}
@keyframes slide-in-blurred-top {
    0% {
        -webkit-transform: translateY(-500px) scaleY(2.5) scaleX(0.2);
        transform: translateY(-500px) scaleY(2.5) scaleX(0.2);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation slide-out-blurred-top
 * ----------------------------------------
 */
.slide-out-blurred-top {
    -webkit-animation: slide-out-blurred-top 0.3s cubic-bezier(0.600, -0.10, 0.735, 0.045) both;
    animation: slide-out-blurred-top 0.3s cubic-bezier(0.600, -0.10, 0.735, 0.045) both;
}
@-webkit-keyframes slide-out-blurred-top {
    0% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(-500px) scaleY(2) scaleX(0.4);
        transform: translateY(-500px) scaleY(2) scaleX(0.4);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
}
@keyframes slide-out-blurred-top {
    0% {
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
        transform: translateY(0) scaleY(1) scaleX(1);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(-500px) scaleY(2) scaleX(0.4);
        transform: translateY(-500px) scaleY(2) scaleX(0.4);
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
.bounce-in-top {
    -webkit-animation: bounce-in-top 0.5s both;
    animation: bounce-in-top 0.5s both;
}
@-webkit-keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes bounce-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: translateY(-65px);
        transform: translateY(-65px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: translateY(-28px);
        transform: translateY(-28px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    90% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}


/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */

.shake-horizontal {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

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



/**
 * ----------------------------------------
 * animation shake-top
 * ----------------------------------------
 */
.shake-top {
    -webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
@-webkit-keyframes shake-top {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    10% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-16deg);
        transform: rotate(-16deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
    }
    80% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    90% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
}
@keyframes shake-top {
    0%,
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }
    10% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    20%,
    40%,
    60% {
        -webkit-transform: rotate(-16deg);
        transform: rotate(-16deg);
    }
    30%,
    50%,
    70% {
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
    }
    80% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    90% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
    }
}

/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
.text-pop-up-top {
    -webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: text-pop-up-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes text-pop-up-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: none;
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: var(--text-pop-up-top-text-shadow, 0 1px 0 var(--grey-darker), 0 2px 0 var(--grey-darker), 0 3px 0 var(--grey-darker), 0 4px 0 var(--grey-darker), 0 5px 0 var(--grey-darker), 0 6px 0 var(--grey-darker), 0 7px 0 var(--grey-darker), 0 8px 0 var(--grey-darker), 0 9px 0 var(--grey-darker), 0 50px 30px rgba(0, 0, 0, 0.3));
    }
}
@keyframes text-pop-up-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: none;
    }
    100% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: var(--text-pop-up-top-text-shadow, 0 1px 0 var(--grey-darker), 0 2px 0 var(--grey-darker), 0 3px 0 var(--grey-darker), 0 4px 0 var(--grey-darker), 0 5px 0 var(--grey-darker), 0 6px 0 var(--grey-darker), 0 7px 0 var(--grey-darker), 0 8px 0 var(--grey-darker), 0 9px 0 var(--grey-darker), 0 50px 30px rgba(0, 0, 0, 0.3));;
    }
}

.tracking-in-contract-bck-top {
    -webkit-animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-13 18:28:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck-top
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract-bck-top {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(-300px);
        transform: translateZ(400px) translateY(-300px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}
@keyframes tracking-in-contract-bck-top {
    0% {
        letter-spacing: 1em;
        -webkit-transform: translateZ(400px) translateY(-300px);
        transform: translateZ(400px) translateY(-300px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

.tracking-in-expand {
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-13 18:58:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}
@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}


.tracking-in-expand-fwd {
    -webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-13 18:31:10
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}
@keyframes tracking-in-expand-fwd {
    0% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-700px);
        transform: translateZ(-700px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

.tracking-out-contract-bck-top {
    -webkit-animation: tracking-out-contract-bck-top 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: tracking-out-contract-bck-top 0.8s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-13 18:31:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-out-contract-bck-top
 * ----------------------------------------
 */
@-webkit-keyframes tracking-out-contract-bck-top {
    0% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-500px) translateY(-300px);
        transform: translateZ(-500px) translateY(-300px);
        opacity: 0;
    }
}
@keyframes tracking-out-contract-bck-top {
    0% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        letter-spacing: -0.5em;
        -webkit-transform: translateZ(-500px) translateY(-300px);
        transform: translateZ(-500px) translateY(-300px);
        opacity: 0;
    }
}


.slide-out-bck-top {
    -webkit-animation: slide-out-bck-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-bck-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-10-13 18:15:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-out-bck-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-out-bck-top {
    0% {
        -webkit-transform: translateZ(1) translateY(0);
        transform: translateZ(1) translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-1100px) translateY(-1000px);
        transform: translateZ(-1100px) translateY(-1000px);
        opacity: 0;
    }
}
@keyframes slide-out-bck-top {
    0% {
        -webkit-transform: translateZ(1) translateY(0);
        transform: translateZ(1) translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-1100px) translateY(-1000px);
        transform: translateZ(-1100px) translateY(-1000px);
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
.jello-horizontal {
    -webkit-animation: jello-horizontal 0.9s both;
    animation: jello-horizontal 0.9s both;
}
@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}


/**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------
 */
.pulsate-fwd {
    --pulsate-fwd-duration: 0.5s;
    --pulsate-fwd-start-scale: 1;
    --pulsate-fwd-end-scale: 1.15;
    -webkit-animation: pulsate-fwd var(--pulsate-fwd-duration) ease-in-out infinite both;
    animation: pulsate-fwd var(--pulsate-fwd-duration) ease-in-out infinite both;
}

@-webkit-keyframes pulsate-fwd {
    0% {
        -webkit-transform: scale(var(--pulsate-fwd-start-scale, 1));
        transform: scale(var(--pulsate-fwd-start-scale, 1));
    }
    50% {
        -webkit-transform: scale(var(--pulsate-fwd-end-scale, 1.15));
        transform: scale(var(--pulsate-fwd-end-scale, 1.15));
    }
    100% {
        -webkit-transform: scale(var(--pulsate-fwd-start-scale, 1));
        transform: scale(var(--pulsate-fwd-start-scale, 1));
    }
}
@keyframes pulsate-fwd {
    0% {
        -webkit-transform: scale(var(--pulsate-fwd-start-scale, 1));
        transform: scale(var(--pulsate-fwd-start-scale, 1));
    }
    50% {
        -webkit-transform: scale(var(--pulsate-fwd-end-scale, 1.15));
        transform: scale(var(--pulsate-fwd-end-scale, 1.15));
    }
    100% {
        -webkit-transform: scale(var(--pulsate-fwd-start-scale, 1));
        transform: scale(var(--pulsate-fwd-start-scale, 1));
    }
}


/**
 * ----------------------------------------
 * custom animation
 * ----------------------------------------
 */
.transform-animation {
    --transform-to: scale(1.15);
    -webkit-animation: transform-animation 1s ease forwards;
    animation: transform-animation 1s ease forwards;
}

@-webkit-keyframes transform-animation {
    from {
        -webkit-transform: initial;
        transform: initial;
    }
    to {
        -webkit-transform: var(--transform-to);
        transform: var(--transform-to);
    }
}
@keyframes transform-animation {
    from {
        -webkit-transform: initial;
        transform: initial;
    }
    to {
        -webkit-transform: var(--transform-to);
        transform: var(--transform-to);
    }
}

.fade-in-out {
    --fade-in-out-opacity-from: 0;
    --fade-in-out-opacity-to: 1;
    --fade-in-out-duration: 0.5s;
    --fade-in-out-delay: 0ms;
    -webkit-animation: fade-in-out var(--fade-in-out-duration) var(--fade-in-out-delay) cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-out var(--fade-in-out-duration) var(--fade-in-out-delay) cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-out {
    0% {
        opacity: var(--fade-in-out-opacity-from, 0);
    }
    25% {
        opacity: var(--fade-in-out-opacity-to, 1);
    }
    75% {
        opacity: var(--fade-in-out-opacity-to, 1);
    }
    100% {
        opacity: var(--fade-in-opacity-from, 0);
    }
}

@keyframes fade-in-out {
    0% {
        opacity: var(--fade-in-out-opacity-from, 0);
    }
    25% {
        opacity: var(--fade-in-out-opacity-to, 1);
    }
    75% {
        opacity: var(--fade-in-out-opacity-to, 1);
    }
    100% {
        opacity: var(--fade-in-out-opacity-from, 0);
    }
}

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
.scale-in-center {
    --scale-in-center-duration: 0.5s;
    -webkit-animation: scale-in-center var(--scale-in-center-duration) cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-center var(--scale-in-center-duration) cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}