@media screen and (min-width: 1025px) {
    /* hi-res laptops and desktops */
    #about-content, #content-container {
        width: 70%;
        margin: 0 auto;
    }

    body {
        font-size: 18px;
    }

    .guide-box {
        margin-top: 4em;
    }
}

@media screen and (min-width: 960px) and (max-width:1024px) {
    /* big landscape tablets, laptops, and desktops */
    #about-content, #content-container {
        width: 70%;
        margin: 0 auto;
    }

    body {
        font-size: 18px;
    }

    .guide-box {
        margin-top: 4em;
    }
}

@media screen and (min-width: 801px) and (max-width: 960px) {
    body {
        font-size: 16px;
    }

    .guide-box {
        margin-top: 6em;
    }

    #about-content, #content-container {
        width: 80%;
        margin: 0 auto;
    }

    #sidebar {
        float: left;
        padding: 1em;
        width: 20%;
    }
}

@media screen and (min-width: 601px) and (max-width: 800px) {
    /* tablet, landscape iPad, lo-res laptops ands desktops */
    #about-content, #content-container {
        width: 90%;
        margin: 0 auto;
    }

    body {
        font-size: 16px;
    }

    .guide-box {
        margin-top: 4em;
    }

    #menu {
        display: none !important;
    }

    #mmenu-humb {
        display: block;
    }

    #mmenu {
        font-size: 1.8em !important;
    }

    table {
        width: 90% !important;
    }

    table img {
        width: 80% !important;
        height: auto !important;
    }
}

@media screen and (min-width: 481px) and (max-width: 600px) {
    /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
    #about-content, #content-container, #content, .content {
        width: 100%;
        margin: 0 auto;
        padding: 0 1em 0 1em;
        box-sizing: border-box;
    }

    #sidebar {
        width: 95%;
        float: left;
    }

    #menu {
        display: none !important;
    }

    #mmenu-humb {
        display: block;
    }

    #mmenu {
        font-size: 1.7em !important;
    }

    body {
        font-size: 12px;
    }

    .guide-box {
        margin-top: 4em;
    }

    #about-content img {
        right: -17%;
    }

    .content {
        padding: 2em;
    }

    table {
        width: 70% !important;
    }

    table img {
        width: 70% !important;
        height: auto !important;
    }

    #cta {
        font-size: 1.3em;
    }

}

@media screen and (min-width: 321px) and (max-width:480px) {
    /* smartphones, Android phones, landscape iPhone */

    #about-content, #content-container, #content, .content {
        width: 100%;
        margin: 0 auto;
        padding: 0 1em 0 1em;
        box-sizing: border-box;
    }

    #sidebar {
        width: 95%;
        float: left;
    }

    #menu {
        display: none !important;
    }

    body {
        font-size: 12px;
    }

    .guide-box {
        width: 200px;
    }

    .logo_img, .logo_text {
        display: block !important;
        position: absolute !important;
    }

    .logo_text {
        bottom: 0;
    }

    .year-text {
        right: 0;
    }

    .lang-text {
        left: 0;
    }

    .logo_text p,
    .logo_text a {
        font-size: 2.3em;
    }

    #about-content img {
        bottom: -8%;
    }

    #mmenu-humb {
        display: block;
    }

    #mmenu {
        font-size: 1.6em !important;
    }

    .content {
        padding: 1.5em;
    }

    table {
        width: 70% !important;
    }

    table img {
        width: 60% !important;
        height: auto !important;
    }

    #cta {
        font-size: 1.3em;
    }

    h1 {
        font-size: 2.2em;
    }

    .zn-date {
        font-size: .7em !important;
    }
}

@media screen and (max-width:320px) {
    /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */

    #about-content, #content-container, #content, .content {
        width: 100%;
        margin: 0 auto;
        padding: 0 1em 0 1em;
        box-sizing: border-box;
    }

    #sidebar {
        width: 95%;
        float: left;
    }

    #menu {
        display: none !important;
    }

    body {
        font-size: 10px;
    }

    .guide-box {
        width: 200px;
    }

    .logo_img, .logo_text {
        display: block !important;
        position: absolute !important;
    }

    .logo_text {
        bottom: 0;
    }

    .year-text {
        right: 0;
    }

    .lang-text {
        left: 0;
    }

    .logo_text p,
    .logo_text a {
        font-size: 2em;
    }

    #about-content img {
        bottom: -3%;
    }

    #mmenu-humb {
        display: block;
    }

    #mmenu {
        font-size: 1.5em !important;
    }

    table {
        width: 70% !important;
    }

    table img {
        width: 50% !important;
        height: auto !important;
    }

    .content {
        padding: 1em;
    }

    #cta {
        font-size: 1.5em;
    }

    h1 {
        font-size: 2.1em;
    }

    .zn-date {
        font-size: .7em !important;
    }
}