/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 960px) {
    #headline { padding: 25px 0; }
    #headline h1, #headline p { font-size: 1.25em; }
    /* #folio-right { display: none; } */
    #folio-left { width: 521px; }
    #myfolio ul { padding: 0 3% 0 0; }
    #project-shots li { background: none; margin: 0 0 15px 0; }
    .project-shot { padding: 0 0 0 0; background: none; width: 100%; }
    .project-shot span { padding: 0 10px; background: none; }
    #left { width: 52%; padding-right: 3%; }
    .project-extra-txt { width: 35%; }
    .project-extra .img { width: 60%; }
    .screenshot-split { float: left; width: 100%; margin: 0 0 45px 0; }
    .left-half { width: 50%; }
    .right-half { width: 50%; }
    .left-half img, .right-half img { width: 100%; }
}
@media screen and (max-width: 920px) {
    #folio-left { width: 485px; }
    #myfolio ul { padding: 0 2% 0 0; }
    #mofolio .list-05 { margin: 0; }
    #left .accolades { padding-bottom: 30px;}
    #left .accolades ul { width: 40%; }
    #left .accolades ul li { padding-right: 20%; }
}

@media screen and (max-width: 880px) {
    #folio-right { display: none; }

    #folio-left { width: 100%; padding: 0 0 15px 0; margin: 0; }
    #myfolio { padding: 0; margin: 0; }
    #myfolio ul { padding: 0 7% 0 0; }
    #projectlist { float: none; padding: 15px 0 0 30px; margin: 0; width: auto; }
    #headline h1, #headline p { font-size: 1.1em; }

    #enquiry { width: 271px; }
    #enquiry fieldset { width: 250px!important; }
    fieldset .field { width: 215px; }
    #enquiry #successful { width: 211; }
    #enquiry .email { float: left; width: 244px; }

    .project-extra-txt { width: 40%; }
    .project-extra .img { width: 55%; }

}

 @media screen and (max-width: 800px) {
    #left { width: 45%; padding-right: 3%; }

}


/* for 700px or less */
@media screen and (max-width: 700px) {
    #headline h1, #headline p { font-size: 1.0em; }
    #logo a img { width: 140px; }
    #header ul li a { font-size: 0.9em; }
    #myfolio ul { padding: 0 5% 0 0; }
    #about #enquiry { display: none; }
    #left { width: 88%; }
    #left .accolades { padding-bottom: 30px;}
    #left .accolades ul { width: auto; min-width: 120px; }
    #left .accolades ul li { padding-right: 25px; }
    #contact #enquiry { float: left; margin-left: 30px; display: inline; }
    #project-shots .project-blurb { width: 80%; }

    #project-shots .project-blurb { width: 80%; padding: 0 10%; }
    #project-shots .tight { width: 80%; padding: 0 10%; }

}
/* for 600px or less */
@media screen and (max-width: 630px) {
    #myfolio ul { padding: 0 3% 0 0; }
    .project-extra-txt { width: 80%; padding: 20px 10% 0 10%; text-align: center; }
    .project-extra .img { width: 100%; }
}
/* for 550px or less */
@media screen and (max-width: 550px) {
    #header-wrap { border-bottom: solid 1px #de736c; background: url(../images/header-bg.jpg) repeat-x center -65px #a61d24; }
    #logo { width: 100%; margin: 24px 0 0 0; }
    #logo a { margin-left: 29px; }
    #header ul { float: left; margin: 0 0 0 10px; }
    #header ul li { padding: 0 0 0 15px; }
    #header ul li a { padding: 10px 0 10px 0; }
    #headline { padding: 20px 0; text-align: left; margin: 0; }
    #headline h1, #headline p, #contact #headline p { padding: 0 30px; font-size: 0.85em; }
    #myfolio ul { min-width: 90px; padding: 0 6% 0 0; }

    #footer ul, #footer p { clear: both; }
    #footer ul li { margin-right: 10px; }
    #footer #top { float: left; margin: 15px 0 0 0; }
    
    #projectlist { display: none; }
    #folio #projectlist { display: block; }
    #folio #projectlist .list-05 { display: none; }

    .left-half { width: 100%; }
    .right-half { width: 100%; }

    #left { width: 80%; }

    #enquiry { width: 241px; }
    #enquiry fieldset { width: 220px!important; }
    fieldset .field { width: 185px; }
    #enquiry #successful { width: 181; }
    #enquiry .email { float: left; width: 214px; }

}