#fw-noscript:first-child img,
#fw-noscript:last-child img {
    animation: animateFade .5s 3s reverse forwards;
}

#fw-intro img.light.browser-warning {
    animation: animateFade .5s 3s reverse forwards;
}

#fw-intro img.night.browser-warning {
    animation: animateFadeBrowserNight .5s 3s reverse forwards;
}

#fw-noscript>p,
#fw-intro>p.browser-warning {
    animation: animateFade 1s 3.5s normal backwards;
}

#fw-intro.animate {
    animation: animateIntro .3s ease-in normal forwards;
}

.fw-intro-logo-animate.light {
    animation: animateIntroLogoLight .4s ease-in normal forwards;
}

.fw-intro-logo-animate.night {
    animation: animateIntroLogoNight .4s ease-in normal forwards;
}

.fw-space-invoke {
    animation: animateSpace .4s ease-out normal forwards;
}

.fw-space-dismiss {
    animation: animateSpaceReverse .3s ease-in normal forwards;
}

.beta-banner-invoke {
    animation: animateFadeReverse .4s ease-out normal forwards;
}

.beta-banner-dismiss {
    animation: animateFade .3s ease-in normal forwards;
}

.fw-overlay-invoke {
    animation: animateFade .4s ease-out normal forwards;
}

.fw-overlay-dismiss {
    animation: animateFadeReverse .3s ease-in normal forwards;
}

#content-scroll-field.animate {
    animation: contentScroll .5s ease-out forwards;
}

#fw-mobile-detail.invoke {
    animation: detailInvoke .3s ease-out forwards;
}

#fw-mobile-detail-frame.transition {
    animation: animateFade .25s .05s ease-out forwards;
}

#fw-mobile-detail.dismiss {
    animation: detailDismiss .3s ease-in-out forwards;
}

.fw-viewer-invoke {
    animation: animateViewer .4s ease-out normal forwards;
}

.fw-viewer-dismiss {
    animation: animateViewerReverse .3s ease-in normal forwards;
}

#fw-contact.first-invoke {
    animation: contactInvoke .4s ease-out forwards;
}

#fw-contact.initialize.second-invoke {
    animation: contactSecondInvoke .4s ease-out forwards;
}

#fw-contact.initialize.dismiss {
    animation: contactDismiss .3s ease-in-out forwards;
}

#fw-contact.initialize {
    animation: contactInitialize 1s ease-out forwards;
}

.contact-hero-blurred.animate {
    animation: rotate 15s linear infinite, contactHeroBlurredInitialize .5s .5s ease-out forwards;
}

#fw-contact-button-wrapper.animate,
#fw-contact-close.animate,
#fw-contact-detail-container.animate {
    animation: contactFadeIn .75s .4s ease-out forwards;
}

#fw-contact-availability-dot.available {
    animation: available 1.5s linear infinite alternate;
    will-change: transform;
}

#fw-contact-availability-dot.unavailable {
    animation: unavailable 1.5s linear infinite alternate;
    will-change: transform;
}

.spinner-rotate {
    animation: rotate 1s linear infinite;
}

.smart-interact {
    animation: smartInteract .5s ease-in forwards;
}

.loading {
    animation: loading 2s ease infinite;
}

@keyframes smartInteract {
    0% {
        transform: scale(1);
    }

    75% {
        transform: scale(.95);
    }

    90% {
        transform: scale(1.03);
    }

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

@keyframes loading {
    0% {
        background-position: 25% 0%;
    }

    50% {
        background-position: 25% 40%;
    }

    100% {
        background-position: 25% 0%;
    }
}

@media (max-width: 642px) {
    #fw-contact.first-invoke {
        animation: contactInvokeMobile .4s ease-out forwards;
    }

    #fw-contact.initialize.second-invoke {
        animation: contactSecondInvokeMobile .3s ease-out forwards;
    }

    #fw-contact.initialize.dismiss {
        animation: contactDismissMobile .3s ease-in-out forwards;
    }

    #fw-contact.initialize {
        animation: contactInitializeMobile 1s ease-out forwards;
    }

    .contact-hero-blurred.animate {
        animation: rotate 15s linear infinite, contactHeroBlurredInitialize .4s ease-out forwards;
    }

    #fw-contact-button-wrapper.animate,
    #fw-contact-close.animate,
    #fw-contact-detail-container.animate {
        animation: contactFadeIn .4s ease-out forwards;
    }
}

@keyframes animateIntro {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
        display: none;
    }
}

@keyframes animateIntroLogoLight {
    from {
        filter: brightness(100%);
    }

    to {
        filter: brightness(50%);
    }
}

@keyframes animateIntroLogoNight {
    from {
        filter: brightness(100%);
    }

    to {
        opacity: .5;
        filter: brightness(135%);
    }
}

@keyframes animateFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes animateFadeReverse {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes animateFadeBrowserNight {
    from {
        opacity: 0;
    }

    to {
        opacity: .34;
    }
}

@keyframes animateSpace {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(.85);
    }
}

@keyframes animateSpaceReverse {
    from {
        transform: scale(.85);
    }

    to {
        transform: scale(1);
    }
}

@keyframes contentScroll {
    from {
        filter: blur(10px);
    }

    to {
        filter: none;
    }
}

@keyframes detailInvoke {
    0% {
        transform: translate(-50%, 100vh);
    }

    100% {
        transform: translate(-50%, 0%);
    }
}

@keyframes detailDismiss {
    0% {
        transform: translate(-50%, 0%);
    }

    100% {
        transform: translate(-50%, 100vh);
    }
}

@keyframes animateViewer {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes animateViewerReverse {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

@keyframes contactInvoke {
    0% {
        max-height: 20em;
        transform: translate(-50%, 50vh);
    }

    100% {
        max-height: 20em;
        transform: translate(-50%, -50%);
    }
}

@keyframes contactInvokeMobile {
    0% {
        max-height: 20em;
        transform: translate(-50%, 100vh);
    }

    100% {
        max-height: 50em;
        transform: translate(-50%, 0%);
    }
}

@keyframes contactSecondInvoke {
    0% {
        max-height: 50em;
        transform: translate(-50%, 50vh);
    }

    100% {
        max-height: 50em;
        transform: translate(-50%, -50%);
    }
}

@keyframes contactSecondInvokeMobile {
    0% {
        max-height: 50em;
        transform: translate(-50%, 100vh);
    }

    100% {
        max-height: 50em;
        transform: translate(-50%, 0%);
    }
}

@keyframes contactDismiss {
    0% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-50%, 50vh);
    }
}

@keyframes contactDismissMobile {
    0% {
        transform: translate(-50%, 0%);
    }

    100% {
        transform: translate(-50%, 100vh);
    }
}

@keyframes contactInitialize {
    0% {
        max-height: 20em;
    }

    50% {
        max-height: 20em;
    }

    100% {
        max-height: 50em;
    }
}

@keyframes contactInitializeMobile {
    0% {
        max-height: 50em;
    }

    100% {
        max-height: 50em;
    }
}

@keyframes contactHeroBlurredInitialize {
    from {
        opacity: 0;
    }

    to {
        opacity: .4;
    }
}

@keyframes contactFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes available {
    from {
        box-shadow: 0px 0px 7px 2px rgba(38, 179, 139, .25);
        transform: scale(1.25);
    }

    to {
        box-shadow: 0px 0px 7px 2px rgba(38, 179, 139, 1);
    }
}

@keyframes unavailable {
    from {
        box-shadow: 0px 0px 7px 2px rgba(200, 45, 71, .25);
        transform: scale(1.25);
    }

    to {
        box-shadow: 0px 0px 7px 2px rgba(200, 45, 71, 1);
    }
}