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

body { padding-top: 60px; }
#header { height: 64px; background: #008ECF; box-shadow: 0 1px 0 rgba(0,0,0,.1);  }
#logo { width: 89.593004578203px; height: 50px; top: 8px; left: 10px; margin: 0; }
#toggle_nav { position: absolute; top: 0px; right: 0px; display: block; width: 64px; height: 64px; border-left: 1px solid rgba(255,255,255,.2); text-align: center; line-height: 64px; color: #FFF; font-size: 24px; }

#nav, .scrolled #nav { position: absolute; top: 63px; left: 0; width: 100%; margin: 0; height: auto; background: #FFF; max-height: 0; }
#nav li, .scrolled #nav li { display: block; height: auto; margin: 0; text-align: left; border-bottom: 1px solid #EDEDED; font-weight: 400; }
#nav a { display: block; line-height: normal; padding: 10px 14px; }
#nav a:link, #nav a:visited { color: #008ECF; text-decoration: none; }
#nav a:hover, #nav a:active { color: #008ECF; text-decoration: none; }

.navigate #nav { max-height: 999px; }

.column_quarter, .column_half, .column_quarter, .column_threequarter { float: none; width: auto; }
.column_lining { padding: 0 16px; }

#page { padding: 30px 0; }

.sub_nav, #page_header .cta, .process_list { display: none; }

h1 { font-size: 29px; }
h2, .contact_intro h3 { font-size: 22px; margin: 0 0 8px 0; }

p, .contact_intro p { font-size: 14px; margin: 0 0 18px 0; }

/* Welcome */

#welcome { position: relative; height: auto; z-index: 2; }
#welcome_content_anchor { position: relative; bottom: auto; left: auto; width: 100%;padding: 100px 0 30px 0;  }

#welcome h2 { font-size: 29px; margin: 0 0 14px 0; }
#welcome h1 { font-size: 22px; margin: 0 0 18px 0; }
#welcome ul { margin: 0 0 24px 0; line-height: 120%; }
#welcome .cta { position: relative; bottom: auto; right: auto; }

/* Projects */

.project_collection li { width: 50%; }

.project_collection li img { position: relative; display: block; width: 100%; max-width: 100%; height: auto; z-index: 1; }
.project_collection .project_content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,142,207,0); -webkit-transition: background-color 500ms ease;
    -moz-transition: background-color 500ms ease;
    -o-transition: background-color 500ms ease;
    transition: background-color 500ms ease;}
.project_collection .project_title { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0,154,224,.55); -webkit-transition: bottom 500ms ease;
    -moz-transition: bottom 500ms ease;
    -o-transition: bottom 500ms ease;
    transition: bottom 500ms ease;}


.project_collection li:hover .project_content { background-color: rgba(0,142,207,0); }
.project_collection li:hover .project_title { bottom: 0; }

.project_title h3 { color: #FFF; padding: 8px 12px 0 12px; font-size: 16px; font-weight: 700; margin: 0; }
.project_title p { color: #FFF; padding: 0 12px 8px 12px; font-size: 12px; margin: 0; }

/* Process */

#process { padding: 30px 0; }
#process h2 { font-size: 29px; margin: 0 0 24px 0; }
#process p { font-size: 14px; margin: 0 0 18px 0;  }

#process .cta { position: relative; bottom: auto; right: auto; }
/* Contact */

#contact { padding: 30px 0; }

.contact_intro { padding: 0 16px; margin-bottom: 32px; }
.contact_fields { margin: 0 0 0 16px;  }
.contact_fields_inner { width: 100%; overflow: hidden; }
.contact_fields_column { float: none; width: auto; }


#map { height: 400px; border-top: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE;}

/* Footer */

#footer { padding: 30px 0; }
#footer ul { display: none; }

}


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

.project_collection li { width: auto; }

}