@media screen and (max-width: 4000px){

    .hmbrgr{
        display: none;
        font-size: 45px;
        padding-right: var(--spacer-l);
    }

    .hmbrgr-icon{
        height: 56px; 
        
    }

    .mobile-menu-hidden, 
    .mobile-menu-visible{
        position: fixed;
        background-color: #FFF;
        top: calc( var(--menu-height) + var(--menu-spacer));
        left: 0px;
        height: 0px;
        width: 100vw;
        z-index: 999;
        padding: 0px;
        transition: all 920ms;
    }
    
    .mobile-menu-visible{
        padding: var(--spacer-l);
        height: calc( 100vh - var(--menu-height) );
        transition: all 920ms;
        overflow: hidden;
    }

    .mobile-menu-links-hidden{
        display: none;
        opacity: 0;
        transition: opacity 320ms;
    }
    .mobile-menu-links-visible{
        opacity: 1;
        transition: opacity 320ms;
    }
    .mobile-menu-link-container{
        padding-bottom: 4vh;
    }

    .dtp-menu, 
    .mobile-header{ 
        display: block; 
        width: 100%;
        padding-top: var(--menu-spacer);
    }

    .mobile-header{ 
        display: none; 
    }
    
    a.mobile-link:link,
    a.mobile-link:active,
    a.mobile-link:visited,
    a.mobile-link:hover{
        position: relative;
        font-family: var(--font-dunbar-bold);
        font-size: 27px;
        text-decoration: none;
    }

    a.dtp-link:link,
    a.dtp-link:active,
    a.dtp-link:visited,
    a.dtp-link:hover{
        position:                   relative;
        font-family:                var(--font-dunbar-bold);
        font-size:                  17px;
        letter-spacing:             0.024em;
        padding-left:               6vw;
        color:                      var(--base-color);
        text-decoration:            none;
    }
    a.dtp-link:hover,
    a.dtp-link-active:link,
    a.dtp-link-active:active,
    a.dtp-link-active:visited,
    a.dtp-link-active:hover{
        position:                   relative;
        font-family:                var(--font-dunbar-bold);
        font-size:                  17px;
        letter-spacing:             0.024em;
        padding-left:               6vw;
        color:                      var(--base-color);
        text-decoration:            underline;
    }

    .active-ampersand-right,
    .active-ampersand-left{
        font-family: var(--font-neue-semibold);
        font-size: 42px;
        color: var(--orange);
        position: absolute;
        top: 14px;
    }
    .active-ampersand-right{
        right: -29px;
        transform: rotate(12deg);
    }
    .active-ampersand-left{
        left: calc(6vw - 29px);
        transform: rotate(-12deg);
    }
    
    a.footer-link:link,
    a.footer-link:active,
    a.footer-link:visited,
    a.footer-link:hover{
        color: var(--base-color);
        font-family: var(--font-neue-bold);
        letter-spacing: 0.04em;
        font-size: 10px;
        text-decoration: none;
        padding: 12px 12px 19px 12px;
        background-color: #FFF;
        color: #222;
        transition: all 0ms;
    }

    a.footer-link:hover{
        border-bottom: 8px solid #222;
        transition: all 0ms;
    }

    .mobile-header-container{
        padding: var(--spacer-l) var(--spacer-l) var(--spacer-l) var(--spacer-l);
    }

    .grid-menu-container{
        padding: var(--spacer-l) var(--spacer-xl) var(--spacer-l) var(--spacer-xl);
    }

    .grid-menu{
        display:                        grid;
        grid-template-areas:            'nav-logo nav-menu';
        grid-template-columns:          220px 1fr;
        overflow:                       hidden;
    }

    .grid-menu-logo {                   
        grid-area: nav-logo; 
        color: var(--base-color);
        padding-bottom: var(--spacer-s);
    }
    
    .grid-menu-links {                  
        grid-area: nav-menu; 
        text-align: right;
        font-size: 19px;
        line-height: 172%;
        text-align: right;
    }
    
}


@media screen and (max-width: 1070px){

    .dtp-menu{  display: none; }
    .hmbrgr, .mobile-header{ display: block; }

}