/* Hide the menu button on desktop */
.nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    /* LOGOTYPE */
    .logotype_box {
        width: 100%;

        position: fixed;
        top: 5vw;
    }

    #logotype {
        position: static;
        top: auto;
        left: auto;

        width: 25vw;
        margin: auto;

        z-index: 999;
    }

    #navbar.scrolled #logotype {
        opacity: 1;
    }

    #navbar.scrolled #wordmark {
        opacity: 0;
        pointer-events: none;
    }

    /* HIDE THE ORIGINAL NAV */
    .navbar:not(.scrolled):hover {
        background: none;
    }

    .navbar.scrolled {
        background-color: none;
    }

    .navbar.scrolled:hover {
        background-color: none;
    }

    header nav ul {
        opacity: 0;
        pointer-events: none;
    }

    #utilities {
        position: fixed;
        top: 10vw;
        right: 10vw;

        margin-left: 0;

        scale: 1.25;
    }

    /* MOBILE NAV TOGGLE */
    .nav-toggle {
        display: block;

        background: none;
        border: none;

        color: white;
        scale: 3;

        cursor: pointer;

        position: fixed;
        top: 10vw;
        left: 10vw;
    }

    /* MAINPICSECTION */
    h1 {
        font-size: 2rem;
        letter-spacing: 0.3rem;
        padding-top: 5vw;
        padding-bottom: 6vw;
    }

    #subtitle1, #subtitle2 {
        font-size: 1rem;
        letter-spacing: 0.3rem;
    }

    #mainpicsection .sticky_box {
        bottom: 38vh;
    }

    main section {
        width: 100%;
    }

    /* SECTION 1 */
    #section1 h3 {
        font-size: 1rem;
        letter-spacing: 0.2rem;
        opacity: 1;
    }

    /* SECTION 4 */
    #section4 {
        width: 90vw;
        margin: auto;
    }

    #section4 .text_box {
        opacity: 1;
    }

    #section4 h3 {
        font-size: 3vw;
        letter-spacing: 0.2vw;
    }

    #section4 a {
        font-size: 2.25vw;
        letter-spacing: 0.1vw;
    }

    /* FOOTER */
    #footer_grid {
        display: block;
    }

    footer nav h3 {
        font-size: 3vw;
    }

    footer nav p {
        font-size: 2.5vw;
        padding: 1vw 0;
    }

    #logo_box {
        width: 50vw;
    }
}