/* Zoom hint -- mobile only, slides out from under search bar, dismisses on first zoom */

.zoom-hint {
    display: none;
}

@media (max-width: 800px) {
    .zoom-hint {
        display: block;
        position: fixed;
        top: 48px;
        left: 36px;
        right: 116px;
        z-index: 90;
        text-align: center;
        color: rgba(255, 255, 255, 0.4);
        font-size: 12px;
        font-family: inherit;
        pointer-events: none;
        background: rgba(36, 38, 56, 0.85);
        padding: 18px 14px 8px;
        border-radius: 0 0 14px 14px;
        opacity: 0;
        transform: translateY(-100%);
        animation: zoom-hint-in 600ms ease-out forwards;
    }

    @keyframes zoom-hint-in {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .zoom-hint.dismissing {
        animation: zoom-hint-out 600ms ease-in forwards;
    }

    @keyframes zoom-hint-out {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-100%);
        }
    }
}