/* Smaller than 1024, Landscape iPads/Tablets */
@media screen and (max-width: 1024px) {

    div.twocol,
    div.twocol.product {
        width: 47%;
    }


    div#slideshow p.caption {
        left: 40%;
    }


    a#residential,
    a#commercial {
        width: 48.5%;
    }


    footer a {
        margin-right: 8px;
    }


    article p#contact-info {
        float: none;
    }


    article form#assessment-form {
        float: none;
        top: 0;
    }

}


/* Smaller than 768, Portrait iPads/Tablets, Landscape Smartphones */
@media screen and (max-width: 768px) {

    header#header hgroup h3#contact {
        margin-bottom: 0;
        position: absolute;
        right: 20px;
        top: 10px;
    }


    ul#main-nav li a {
        font-size: 16px;
    }


    div#slideshow {
        display: none;
    }


    p.intro {
        width: 100%;
    }


    a#residential,
    a#commercial {
        width: 47.7%;
    }


    div.twocol,
    div.twocol.product {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        padding: 20px 0px;
        border-bottom: 1px solid #888;
    }


    div.twocol.product img {
        margin-bottom: 0;
    }


    div#special-bar {
        text-align: center;
    }


    div#special-bar a {
        float: none;
    }


    article form#assessment-form li:nth-of-type(5) ul {
        padding-left: 0;
        height: auto;
    }


    article form#assessment-form li:nth-of-type(8) ul {
        padding-left: 0;
        height: auto;
    }


    footer a {
        width: 20%;
        margin-right: 4%;
    }


    footer a img {
        width: 100%;
        height: auto;
    }

}


/* Smaller than 480, Landscape Smartphones */
@media screen and (max-width: 480px) {

    /* Header styles */

    header#header hgroup {
        width: auto;
    }


    header#header hgroup h1 {
        margin-top: 10px;
        width: auto;
    }


    header#header hgroup h1 a img {
        max-width: 320px;
        width: 100%;
        height: auto;
    }


    header#header h1,
    header#header h2 {
        text-align: center;
    }


    header#header hgroup h3.special-offer {
        display: none;
    }


    header#header hgroup h3#contact {
        position: static;
        text-align: center;
        float: none;
    }


    header#header hgroup,
    nav,
    section#content {
        padding: 5%;
    }


    /* Navigation */
    ul#main-nav {
        height: auto;
    }


    ul#main-nav li {
        float: none;
        margin: 0px;
        text-align: center;
    }


    ul#main-nav li a {
        display: block;
        padding: 10px 15px;
    }


    ul#main-nav a:hover,
    ul#main-nav a.selected {
        background: #0788B7;
    }


    section#content {
        float: none;
        width: auto;
        margin: 10px 0px;
    }


    aside#sidebar {
        float: none;
        width: auto;
        margin: 10px 0px;
    }


    /* Footer styles */
    footer {
        padding: 0;
    }


    footer a {
        float: none;
        display: block;
        margin: 10px auto;
        width: 100%;
    }


    footer a img {
        width: auto;
        height: auto;
        display: block;
        margin: 0px auto;
    }


    /* Hide slideshow for now */
    div#slideshow {
        display: none;
    }


    /* Homepage action buttons */
    a#residential,
    a#commercial {
        width: 100%;
        margin-bottom: 10px;
        float: none;
    }


    a#residential p,
    a#commercial p {
        margin: 10px;
        font-size: 14px;
    }


    /* About us and product list */
    div.twocol,
    div.twocol.product {
        height: auto;
        width: auto;
        padding-right: 0;
        border-bottom: 1px solid #999;
        padding-bottom: 10px;
    }


    div.twocol img,
    div.twocol.product img {
        margin-bottom: 20px;
    }


    div.twocol.product img {
        float: none;
    }


    div.twocol.product h4,
    div.twocol.product h3,
    div.twocol.product p {
        margin-left: 0;
        float: none;
    }


    /* Contact us page and assessment form */
    section#content article p#contact-info {
        float: none;
        width: auto;

    }


    section#content article form#assessment-form {
        position: static;
        float: none;
        width: auto;
        margin-top: 50px;
    }


    section#content article form#assessment-form fieldset {
        padding: 10px;
    }


    section#content article form#assessment-form fieldset legend {
        font-size: 20px;
    }


    section#content article form#assessment-form fieldset li label {
        float: none;
        width: auto;
    }


    section#content article form#assessment-form fieldset li input,
    section#content article form#assessment-form fieldset li textarea {
        width: 220px;
    }


    section#content article form#assessment-form input.generic-button {
        margin-left: 0;
    }

}


/* Smaller than 320, Portrait Smartphones */
@media screen and (max-width: 320px) {

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


    .twocol img {
        float: none;
    }

}