/*desktop, laptop screen*/

@media screen and (max-width: 900px) {
    /* page wrap */
    #wrapper {
        width: 100%;
    }

    /* content */
    #content {
        height: auto;
        padding: 0px;
        max-width: 100%;
    }

    #header {
        height: auto;
        max-width: 100%;
    }

    /*********footer*/
    #footer {
        width: 100%;
        padding: 0px;
    }
}


/*tablet mobile smaller than 650*/

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

    /* header */
    #header {
        height: auto;
        max-width: 100%;
    }


    /* content */
    #content {
        width: auto;
        float: none;
        margin: 0;
        max-width: 100%;
    }

    nav.center ul {
        text-align: left;
        display: block;
    }

        nav.center ul li {
            display: block;
        }
}

/*smaller than 550*/
@media screen and (max-width: 550px) {
    .left, .right {
        float: none;
        width: auto;
    }
}


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

    /* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }

    .col {
        width: 100%;
    }
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 280px) {
    .col {
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_2_of_2 {
        width: 100%;
    }

    .span_1_of_2 {
        width: 100%;
    }
}