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

    h2 {
        margin: 0 0 2% 0;
    }

    header {
        display: flex;
        flex-direction: column;
        width: 100vw;
        top: 0;

    }

    #navlogo {
        display: flex;
        flex-direction: row;
        position: fixed;
        top: 0;
        background-color: white;
        justify-content: center;
    }

    #navlogo a {
        margin: 2% 12%;
    }

    #navlogo a img {
        width: 170px;
    }

    #navlogo nav {
        display: block;
        position: relative;

        z-index: 1;

        -webkit-user-select: none;
        user-select: none;
        width: 0;
        background-color: white;
    }

    #navlogo nav ul a {
        text-decoration: none;
        color: #232323;
        transition: color 0.3s ease;
        padding: 0 30px;
        margin: 0.5%;
    }


    #navlogo nav ul a:hover {
        padding: 0 30px;
        margin: 0.5%;
    }

    #navlogo nav input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;

        cursor: pointer;

        opacity: 0;
        /* hide this */
        z-index: 2;
        /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }

    #navlogo nav span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;

        background: black;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
    }

    #navlogo nav span:first-child {
        transform-origin: 0% 0%;
    }

    #navlogo nav span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    #navlogo nav input:checked~span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    #navlogo nav input:checked~span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    #navlogo nav input:checked~span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    #navlogo nav ul {
        position: absolute;
        justify-content: center;
        flex-direction: column;
        width: 105vw;
        margin: 20px 0 0 -75px;
        height: 90vh;

        background: white;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */

        transform-origin: 0% 0%;
        transform: translate(100%, 0);

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #navlogo nav ul a li {
        padding: 10px 0;
        font-size: 22px;
    }

    #Active_Nav {
        padding: 10px 0;
        font-size: 22px;
    }

    #navlogo nav input:checked~ul {
        transform: translate(-64%, 0);
    }

    main {
        display: flex;
        flex-direction: column;
        padding: 2% 10%;
    }

}

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