/* =========================================================
   MOTION.BY
   BRAND LOGO
   ========================================================= */

.site-header .logo {
    display: inline-flex;

    align-items: center;

    width: auto;
    height: auto;

    margin: 0;
    padding: 0;

    text-decoration: none;

    color: #f2f2f2;

    line-height: 1;

    transition: opacity .2s ease;
}


.site-header .logo:hover {
    opacity: .8;
}


/* =========================================================
   DESKTOP LOGO
   ========================================================= */

.logo-desktop {
    display: inline-flex;

    align-items: baseline;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -.055em;

    white-space: nowrap;
}


.logo-desktop .logo-g,
.logo-desktop .logo-ns,
.logo-desktop .logo-by {
    color: #f2f2f2;
}


.logo-desktop .logo-dot {
    color: #ff4f19;

    margin: 0 1px;
}


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

.logo-mobile {
    display: none;

    width: 32px;
    height: 32px;

    object-fit: contain;
}


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

@media (max-width: 800px) {

    .logo-desktop {
        display: none;
    }


    .logo-mobile {
        display: block;

        width: 32px;
        height: 32px;
    }

}