/* Extra small devices (1px and up) */
@media (min-width: 1px) {
    /* ---------- Header ---------- */

    #header-bar-background {
        position: absolute;
    }

    #header-bar-content {
        position: absolute;
        top: 0.5em;
        left: 5%;
        width: 90%;
    }

    #header-content {
        padding: 0.5em;
    }

    #header-to-main {
        display: none;
    }

    /* Nav */
    nav {
        position: fixed;
        top: 100vh;
        right: 0;
        width: 100vw;
        height: calc(100vh - 3em);
        background: #574b90;
        overflow: auto;
        z-index: 900;
        font-weight: bold;
    }

    nav.nav-visible {
        top: 0;
    }

    nav ul li {
        display: block;
        margin: 1em 0.2em;
    }

    nav ul li a {
        color: white;
        opacity: 0.6;
    }

    nav ul li.active a {
        opacity: 1;
    }

    #nav-toggle {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: white;
        border-top: 1px solid #EEE;
        color: #574b90;
        width: 100vw;
        height: 1.5em;
        font-size: 2.6em;
        line-height: 1.5em;
        text-align: center;
        cursor: pointer;
        z-index: 1000;
    }

    #header-content-tagline {
        left: 5%;
        top: 30vh;
        width: 90%;
    }

    #header-content-tagline-primary {
        font-size: 1.4em;
        padding: 0.8em;
    }

    #header-content-tagline-secondary {
        font-size: 1em;
        padding: 1em;
    }

    /* Header base */
    #header-base-content {
        width: 100%;
        margin-top: -2.2em;
        font-size: 3em;
    }

    /* ---------- Team ---------- */

    .team-projectsupporter {
        width: 100%;
    }

    /* ---------- Footer ---------- */

    footer {
        padding: 1em 1em 5em 1em;
    }

    #footer-content-logos div {
        margin: 1.3em 0;
        display: block;
    }

    #footer-content-logos img {
        height: 2.7em;
    }
}