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

    /* Default header widths to auto */

    header#header {
        width: auto;
    }


    header#header hgroup {
        padding: 0px 10px;
    }


    header#header hgroup,
    ul#main-nav {
        height: auto;
        width: auto;
    }


    /* Homepage action buttons */

    a.generic-button.left,
    a.generic-button.right {
        width: 45.5%;
    }


    /* Category index page buttons */

    a.generic-button.project-category {
        height: auto;
        margin-left: 0;
        margin-right: 0;
        width: 45.5%;
    }


    a.generic-button.project-category:nth-of-type(odd) {
        margin-right: 15px;
    }


    a.generic-button.project-category img {
        width: 100%;
        height: auto;
    }


    a.generic-button.project-category p {
        top: 230px;
    }


    a.generic-button.project-category:hover p {
        top: 185px;
    }


    /* Gallery styles, these are inherited by other queries except for thumbnails */


    div.gallery {
        width: auto;
    }


    div.gallery img.gallery-filler {
        width: 100%;
        height: auto;
    }


    div.gallery div.gallery-stage img {
        width: auto;
    }


    div.gallery div.gallery-controls ul.gallery-thumbnails {
        height: auto;
    }


    div.gallery-controls ul.gallery-thumbnails li {
        width: 10%;
        margin: 5px;
    }


    div.gallery-controls ul.gallery-thumbnails li img {
        width: 100%;
    }


    /* Shorten margin of footer p */

    footer p:last-of-type {
        margin-left: 500px;
    }

}


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


    /* Hide the carousel */

    div.carousel {
        right: 0;
        position: relative;
        width: 100%;
    }

    div.carousel div.carousel-stage {
        width: 100%;
        height: auto;
    }

    div.carousel div.carousel-stage img {
        width: 100%;
        height: auto;
    }

    div.carousel div.carousel-stage p {
        font-size: 12px;
    }

    div.carousel .carousel-sliders a {
        font-size: 56px;
        height: 73px;
        width: 55px;
    }

    div.carousel .carousel-sliders a.left {
        left: 15px;
    }

    div.carousel .carousel-sliders a.right {
        right: 15px;
    }


    header#header hgroup h2 {
        width: 65%;
        margin-bottom: 0;
    }

    header#header hgroup h2 br {
        display: none;
    }


    /* Navigation */

    ul#main-nav li {
        margin: 0px;
    }


    ul#main-nav li a {
        font-size: 15px;
        padding: 5px 30px;
    }


    /* Reduce with of category index button */

    a.project-category.generic-button {
        width: 44%;
    }
}


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


    div.carousel .carousel-sliders a {
        font-size: 48px;
        height: 63px;
    }

    /* Reduce width of map and remove float */

    iframe#map {
        width: 99.5%;
        float: none;
    }


    /* Changing some generic styles */

    h1 {
        font-size: 28px;
    }

    span.huge {
        font-size: 22px;
    }


    p.intro {
        margin-top: 15px;
    }


    img.left,
    img.right {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }


    /* Layout */

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


    /* Navigation styles */

    ul#main-nav li {
        text-align: center;
    }


    ul#main-nav li a {
        display: block;
        font-size: 15px;
        padding: 5px 18px;
    }


    /* Homepage action buttons */

    a.generic-button.left,
    a.generic-button.right {
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }


    /* Project category index page */

    a.generic-button.project-category {
        width: auto;
        height: auto;
        margin-left: 0;
        margin-right: 0;
    }


    a.generic-button.project-category:nth-of-type(odd) {
        margin-right: 0;
    }


    a.generic-button.project-category img {
        width: 100%;
        height: auto;
    }


    /* Project summary */

    a.generic-button.project-snippet {
        text-align: left;
    }


    a.generic-button.project-snippet img {
        margin-bottom: 0px;
        margin-right: 10px;
        float: left;
    }


    /* Footer styles */

    footer {
        text-align: center;
    }


    footer p:last-of-type {
        margin-left: 0;
    }


    /* Change width of gallery thumbs */

    div.gallery-controls ul.gallery-thumbnails li {
        width: 18%;
        margin: 5px;
    }

}


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


    /* Unfloat all header elements and stack navigation */

    header#header {
        width: auto;
    }


    header#header hgroup,
    ul#main-nav {
        height: auto;
        width: auto;
    }

    header#header hgroup h2 {
        width: 100%;
        margin-bottom: 10px;
    }

    header#header hgroup h1,
    header#header hgroup h2,
    header#header hgroup h3 {
        float: none;
        text-align: center;
    }


    header#header h3 a {
        margin: 0px 10px;
    }


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


    ul#main-nav li a {
        display: block;
        border-bottom: 1px solid #475691;
        padding: 10px 0px;
    }


    ul#main-nav li:hover ul {
        display: none;
    }


    /* Project Summary */

    a.generic-button.project-snippet {
        text-align: center;
    }


    a.generic-button.project-snippet img {
        margin-bottom: 15px;
        margin-right: 0;
        width: 100%;
    }


    /* Gallery Thumbnail width */

    div.gallery-controls ul.gallery-thumbnails li {
        width: 20%;
        margin: 5px;
    }


    /* Project list */

    ul.project-list li p,
    ul.project-list li p:nth-of-type(2),
    ul.project-list li p:nth-of-type(3) {
        display: block;
        width: 100%;
    }

}



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

    div.carousel .carousel-stage p {
        display: none;
    }

    div.carousel .carousel-sliders a {
        margin-top: -32px;
    }

    ul.project-list li {
        width: auto;
        float: none;
    }

}


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

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

}