@media only screen and (max-width:1300px) {
    #pgEmploymentHistory h3 span {
        float: none;
        display: block;
        padding-top: 5px;
        opacity: 0.7;
        font-size: 0.7em;
        text-transform: uppercase;
    }
}

@media only screen and (max-width:950px) {
    .project {
        width: 300px;
        height: 169px;
    }
        .project img {
            width: 300px;
            height: 169px;
        }
}

@media only screen and (max-width:930px) {
    #mainHeader {
        right: 0;
        left:0;
        border-radius: 0;
        border: none;
        box-shadow: 0 5px 5px rgba(0,0,0,0.3);
    }
        #mainHeader h1 {
            border-radius: 0;
            padding: 12px;
        }

        nav#desktopPrimary {
            left: 0;
            top: 56px;
            border-radius: 0 0 5px 0;
        }

    section#primaryContent {
        margin: 140px auto 60px auto;
    }

    #pgSkills section > div {
        min-width: 300px;
    }

    ul.tasks {
        column-count: 1;
    }
}

@media only screen and (max-width:760px) {
    #pgSkills section > div {
        min-width: 90%;
    }
}

@media only screen and (max-width:716px) {
    .project {
        float: none;
        margin: 10px auto;
        width:90vw;
        background-color: rgba(0,0,0,0.8);
        height: 225px;
    }
        .project img {
            float: none;
            display: block;
            margin: 0 auto;
            width: 400px;
            height: 225px;
        }
}

@media only screen and (max-width:690px) {
    .skillLevels {
        font-size: 0.8em;
    }

    #projectDetails header {
        width: calc(90vw - 40px);
    }

    #projectDetails .gallery {
        width: calc(90vw - 40px);
        height: calc((90vw - 40px) * 9/16);
    }
    #projectDetails .gallery img {
        width: calc(100% - 30px);
        height: auto;
        left: 15px;
        top: 15px;
    }
}

@media only screen and (max-width:520px) {
    nav#desktopPrimary {
        position: absolute;
        top: -100px;
    }
    section#primaryContent {
        margin: 90px auto 60px auto;
    }
    h2 {
        text-align: center;
    }
    #mobilePrimaryToggle {
        display: block;
    }
    #mobilePrimary {
        display: block;
    }
}

@media only screen and (max-width:445px) {
    .project {
        width: 300px;
        height: 169px;
    }
        .project img {
            width: 300px;
            height: 169px;
        }
}

@media only screen and (max-width:440px) {
    h1 {
        font-size: 1.4em;
        line-height: 32px;
    }
    h2 {
        font-size: 1.4em;
    }
    h3 {
        font-size: 1.3em;
    }
    #pgSkills h3 {
        font-size: 1.6em;
    }
    ul.tasks {
        font-size: 0.85em;
    }
}

@media only screen and (max-width:410px) {
    #pgSkills section {
        font-size: 0.85em;
    }
}