.site-header{
    position:fixed;
    top:22px;
    left:24px;
    z-index:1200;

    width:96px;
    height:72px;

    padding:0;
    margin:0;

    display:block;
    line-height:0;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .7s ease,
        visibility .7s ease,
        transform .7s ease;

    transform:translateY(-8px);
}

body.intro-done .site-header{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.site-header__logo{
    display:block;
    width:96px;
    height:72px;
    line-height:0;

    background-color:var(--color-brand);

    -webkit-mask-image:url("../svg/verra-logo.svg");
    mask-image:url("../svg/verra-logo.svg");

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center;
    mask-position:center;

    -webkit-mask-size:contain;
    mask-size:contain;
}

.site-header__logo-img{
    display:block;
    width:96px;
    height:72px;
    max-width:96px;
    max-height:72px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

body:not(.intro-done) .site-menu-trigger{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

body.intro-done .site-menu-trigger{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

@media (max-width:768px){
    .site-header{
        top:16px;
        left:18px;
        width:78px;
        height:58px;
    }

    .site-header__logo,
    .site-header__logo-img{
        width:78px;
        height:58px;
        max-width:78px;
        max-height:58px;
    }
}

@media (max-width:480px){
    .site-header{
        top:14px;
        left:14px;
        width:66px;
        height:50px;
    }

    .site-header__logo,
    .site-header__logo-img{
        width:66px;
        height:50px;
        max-width:66px;
        max-height:50px;
    }
}