/* =========================================================
   APEX SERVICES - LOGO TYPING EFFECT
   Keeps navigation fixed while logo is typing
   ========================================================= */

/* Reserve a fixed space for the logo */
.ve-logo {
    flex: 0 0 220px !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
}

/* Logo */
.apex-logo {
    display: inline-flex;
    align-items: center;
    width: 200px;
    min-width: 200px;
    height: 40px;

    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.5px;

    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    overflow: visible;
}

.apex-logo:hover,
.apex-logo:focus {
    color: #ffffff;
    text-decoration: none;
}

/* Typed text */
#apexTyping {
    display: inline-block;
    white-space: nowrap;
    color: #ffffff;
}

/* Orange part: SERVICES */
#apexTyping .orange {
    color: #f28c28;
}

/* Typing cursor */
.apex-logo .typing-cursor {
    display: inline-block;
    width: 8px;
    color: #f28c28;
    font-weight: 400;
    margin-left: 2px;
    animation: apexCursorBlink 0.7s infinite;
}

/* Cursor blinking */
@keyframes apexCursorBlink {
    0%, 45% {
        opacity: 1;
    }

    46%, 100% {
        opacity: 0;
    }
}

/* Prevent navigation from shrinking */
.ve-nav {
    flex-shrink: 0;
}

.ve-nav-cta {
    flex-shrink: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ve-logo {
        flex-basis: 170px !important;
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
    }

    .apex-logo {
        width: 160px;
        min-width: 160px;
        font-size: 21px;
    }
}