/*GENERAL*/
@media screen and (max-width: 1300px) {
    /*article*/
    .paragraph,
    .work-head { padding: 2em 7em; }
}


@media screen and (max-width: 860px) {
    .container.width50 { width: 60%; }
    .container.container-round { max-width: none; }

    /*article*/
    .paragraph,
    .work-head {
        padding: 2em 5em;
    }
    .quote { font-size: 2.5em; }
}

/*landscape*/
@media screen and (max-width: 768px) {
    .container.width50 { width: 65%; }
}

@media screen and (max-width: 668px) {
    /*General*/
    h3 { font-size: 1.3em; }
    p, a { font-size: 1em;}

    .container.container-round { 
        padding: 1.2em 1.5em;
    }

    /*article*/
    .quote { font-size: 2.2em; }
}

@media screen and (max-width: 600px) {
    /*titles*/
    h1.huge {
        font-size: 4em;
        margin-bottom: 2em;
    }
    /*article*/
    .paragraph,
    .work-head {
        padding: 2em 2em;
    }
}

@media screen and (max-width: 525px) {
    /*General*/
    h1.huge {
        font-size: 3em;
        margin-bottom: 3em;
    }
}

@media screen and (max-width: 435px) {
    /*General*/
    h1 { font-size: 1.6em; }
    h3 { font-size: 1.2em; }
    h1.huge {
        font-size: 2.5em;
        margin-bottom: 3em;
    }
    p, a, li { font-size: 0.9em; }
    /*avoid font-size getting bigger when layering lists*/
    ol li ul li,
    ul li ul li,
    ul li ol li,
    ol li ol li { font-size: 1em; }

    .container.container-round {
        /*text-align: center;*/
        width: 100%;
        padding: 1.1em 1.3em;
    }

    /*article*/
    .quote { font-size: 1.8em; }
}

@media screen and (max-width: 310px) {
    /*titles*/
    h1 { font-size: 1.2em; }
    h1.huge {
        font-size: 1.8em;
        margin-bottom: 3.8em;
    }
    h3 { font-size: 1em; }

    /*article*/
    .paragraph,
    .work-head { padding: 1.5em 1.5em; }
    .quote { font-size: 1.4em; }
}