/* Thin browser */
@media screen and (max-width: 766.99px) {

    nav a {
        justify-content: center;
    }

    #contactButton{
        margin: 0 10vw 0 5vw;
        transition: height 0;
    }

    #menutabs {
        transition: height 0;
    }

    #logotype {
        transition: height 0;
    }

    #menu {
        top: 0;
        right: -100%;
        position: fixed;
        width: 50vw;
        height: 100%;
        z-index: 200;
        padding-top: 20vw;
        background-color: var(--accentLighter);
        transition: right 200ms ease-out;
        opacity: 0;
        visibility: hidden;
    }

    nav.clicked #menu {
        right: 0;
        opacity: 1;
        visibility: visible;
    }

    .menuOption {
        width: 100%;
        border-radius: 0;
        justify-content: left;
        padding: 5vw;
        color: var(--offWhite);
        display: block;
        margin: 1vw;
    }

    .menuOption:hover {
        color: var(--complementHover);
    }

    
    .menuOption::after {
        display: block;
        content: '';
        height: 4px;
        width: 100%;
        background-color: var(--accent);
    }

    #logoConstant {
        display: none;
    }

    nav {
        transition: transform 0.3s ease;
    }

    nav.nav-hidden {
        transform: translateY(-120%);
    }
    
}