/********************************
RESPONSIVE CSS * MEDIA QUERIES
********************************/

/*iPad Landscape*/
@media screen and (max-width: 1024px), screen and (max-device-width: 1024px), screen and (max-width: 1200px)  {
    .team > a.team-prev, .team > a.team-next {position: relative;left: 800px;right: 0px;top: 0;display: inline-block;}
    .team_portrait > a.team-prev, .team_portrait > a.team-next {position: relative;left: 800px;right: 0px;top: 0;display: inline-block;}
    #sections {margin-top: 20px;}
    .footer {width: 960px;position: relative;margin: 30px auto;padding: 0px 0px 30px 0px;z-index: 900000;}
    .content {padding-bottom: 0px;}
    .content {
        width: 960px;
        overflow: hidden;
    }
    #sections > ul > li + li {
        margin-left: 9px;
    }
    
    .project {
        width: 320px;
        height: 250px;
    }
    
    .post {
        width: 479px;
        height: 245px;
    }
    
    .post .post_preview {
        height: 245px;
    }
    
    #map {
        width: 475px;
    }
    
    .home_page {
        width: 100%;
    }

    .logo a img {
        max-width: 119px;
    }

    #work_slides iframe {
        width: 100%;
    }
    
    .one_half {
	    width: 100%;
    }
    
    .one_third {
	    width: 100%;
    }
    
    .one_fourth {
	    width: 100%;
    }
    
    .last {
	    clear: both;
    }
}

/*iPad Portrait*/
@media handheld and (max-width: 767px), screen and (max-device-width: 767px), screen and (max-width: 960px)  {
    
    .content {
        width: 682px;
        overflow: hidden;
    }
    .home_page {
        width: 100%;
    }
    
    .welcome_text h1, .page_title h1 {
        font-size: 55px;
    }
    .welcome_text h2, .page_title h2 {
        font-size: 50px;
    }
    
    .team {
        display: block;
        width: 637px;
        margin: auto
    }
    
    .footer {
        width: 682px;
    }
    
    .team > a.team-prev, .team > a.team-next {
        left: 477px;
    }
    
    .welcome_text h1, .page_title h1 {
        font-size: 45px;
    }
    
    .welcome_text h2, .page_title h2 {
        font-size: 40px;
    }
    
    .projects_box, .blog_posts, .contact {
        width: 682px;
        margin: 40px auto 0px auto;
    }
    
    .project {
        width: 341px;
        height: 276px;
    }
    
    .post {
        width: 511px;
        height: 256px;
    }
    
    .blog_posts {
        width: 511px;
        margin: 40px auto 0px auto;
    }
    
    .project_filter {
        margin-top: -13px;
    }
    
    #map {
        width: 100%;
    }
    
    .contact_form {
        width: 100%;
    }
    
    .contact_form input[type="text"] {
        width: 303px;
    }
    
    .contact_form textarea {
        width: 633px;
        max-width: 633px;
    }
    
    .menu li a {
        padding: 0px 20px;
        padding-top: 50px;
    }

    .blog_post, .post_intro, .post_img {
        width: 100%;
    }

    .post_info {
        width: 100%;
        height: 82px;   
    }

    .post_info .post_category, .post_info .comments, .post_info .user, .share_links a {
        display: inline-block;
    }

    .post_info p + p {
        margin-left: 24px;
        margin-top: 0px;
    }

    .share_links {
        position: absolute;
        top: 28px;
        right: 20px;
    }

    .share_links a + a {
        margin-left: 21px;
        margin-top: 0px;
    }

    .projects, .image_slider, .project_info_content {
        width: 100%;
    }

    .project_content {
        width: 482px;
    }

}

/*iPhone Landscape*/
@media screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 750px)  {
    .header { overflow: visible;}
    
    .content {
        width: 420px;
        overflow: hidden;
    }
    
    .footer {
        width: 420px;
    }

    .home_page {
        width: 100%;
    }
    
    .menu {
        display: none;
    }
    
    .team {
        display: block;
        width: 314px;
        margin: auto
    }
    
    .mobile_menu {
        display: block;
    }
    
    .welcome_text h1, .page_title h1 {
        font-size: 35px;
    }
    
    .welcome_text h2, .page_title h2 {
        font-size: 30px;
    }
    
    .slide li a {
        padding: 20px 50px;
        font-size: 14px;
    }
    
    .mobile_menu {
        right: 30px;
    }
    
    #sections {
        width: 314px;
    }
    
    .team > a.team-prev, .team > a.team-next {
        left: 154px;
    }
    
    .footer {width: 420px;position: relative;margin: 30px auto;padding: 0px 0px 30px 0px;z-index: 900000;}

    .post_intro {
        height: auto;
    }

    .post_img {
        height: 221px;
    }

    .post_img img {
        height: 100%;
    }

    .post_intro h1 {
        font-size: 20px;
        height: auto;
        line-height: 28px;
    }

    .post_info {
        height: 167px;    
    }

    .post_info .post_category, .post_info .comments, .post_info .user, .share_links a {
        display: block;
    }

    .post_info p + p {
        margin-left: 0px;
        margin-top: 24px;
    }

    .share_links a + a {
        margin-left: 0px;
        margin-top: 21px;
    }

    .project_content, .project_social {
        width: 100%;
    }
    
    .sub_title {
        display: block;
        float: none;
    }

    .project_filter {
        width: 341px;
        position: relative;
        margin: 30px auto 0px auto;
    }

    .main_item {
        background: #F4B530 url(../images/icons/fold_white.png) no-repeat 312px center;
    }

    .projects_box {
        width: 341px;
        margin: 40px auto 0px auto;
    }

    .blog_posts {
        width: 100%;
        margin: 40px auto 0px auto;
    }

    .post {
        width: 100%;
    }

    .contact_form input[type="text"], .contact_form textarea {
        width: 370px;
    }

    .contact_form {
        height: 586px;
    }

    .one_half, .one_third, .one_fourth {
        width: 420px;
    }

    .one_half img, .one_third img, .one_fourth img {
        width: 100%;
        height: auto;
    }

}

/*iPhone Portrait*/
@media screen and (max-width: 320px), screen and (max-device-width: 320px), screen and (max-width: 450px) {
    
    .logo {
        left: 10px;
    }
    
    .content {
        padding-top: 48px;
    }
    
    .mobile_menu {
        right: 0px;
        margin-right: 0px;
    }
    
    .team > a.team-prev, .team > a.team-next {
        left: 120px;
    }
    
    .welcome_text h1, .page_title h1 {
        font-size: 25px;
    }
    
    .welcome_text h2, .page_title h2 {
        font-size: 20px;
    }
    
    .content, .inner_content {
        width: 280px;
        overflow: hidden;
    }
    
    .home_page {
        position: relative;
        top: 0px;
        margin-top: 40px !important;
    }
    
    .team {
        display: block;
        width: 280px;
        margin: auto;
    }
    
    .team p, .team_portrait p {
        font-size: 12px;
        margin-top: 27px;
    }
    
    .footer {width: 280px;position: relative !important;margin: 30px auto;padding: 0px 0px 30px 0px;z-index: 900000;}
    
    #prevslide, #nextslide {
        display: none;
    }
    
    .projects_box, .blog_posts, .contact, .project, .project_filter, .team .info, .person, .footer {
        width: 280px;
    }

    .home_page {
        width: 100%;
    }
    
    .sub_title {
        display: block;
        float: none;
    }
    
    .project_filter {
        position: relative;
        margin-top: 30px;
    }
    
    .main_item {
            background: #F4B530 url(../images/icons/fold_white.png) no-repeat 250px center;
    }
    
    .post {
        width: 280px;
        height: 200px;
    }
    
    .post .post_views, .post .post_comments {
        font-size: 14px;
    }
    
    .post_info .read_post {
        font-size: 12px;
    }
    
    .post .post_title a {
        font-size: 14px;
        line-height: 19px;
    }
    
    .post .post_category {
        font-size: 14px;
    }
    
    .contact_form {
        height: 588px;
    }
    
    .contact_form input[type="text"], .contact_form textarea {
        width: 232px;
    }

    .post_info {
        height: 248px;
    }

    .share_links {
        position: relative;
        margin-top: 28px;
        right: 0px;
        top: 0px;
    }

    .one_half, .one_third, .one_fourth {
        width: 280px;
    }

    .one_half img, .one_third img, .one_fourth img {
        width: 100%;
        height: auto;
    }

    #sections {
        width: 280px;
    }

    .person > img {
        margin-left: -17px;
    }

}