/* MODIFIED: 15 February 2013 */

/* 
 * Global Kant styles
 */


/*    GENERAL PAGE STYLES. Specific styles applied to elements,
    classes and IDs will override these styles. In general,
    if multiple styles target the same element, styles written
    later in the CSS will override those written earlier. */

body, html {
    margin: 0px;
    padding: 0px;
}

body {
    background: #f2f2f2;
    color: #000000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 20px;
    min-width: 774px;
    overflow-x: hidden;
    visibility: hidden;
}


/*    BOX STRUCTURE
    
    Styles for DIVs which make up page structure.
    Metrics are based on 100px columns with 40px gutters.
    6 columns = 800px = project image width */

.first { /* The first DIV on a project or page.
    this is needed on pages where the Cargo "title"
    is set to show. */
    margin-top:43px;
    padding-top:6px;
}

.dummy { /* This class is used on a DIV that is only
    meant to take up blank space in the column structure. */
    height:1px;
}

.col1 { /* Use this class to specify a DIV with a 1-column wdith. */
    width:100px;
    margin-right:40px;
    float:left;
}
.col2 { /* 2 column width DIV */
    width:240px;
    margin-right:40px;
    float:left;
}
.col3 { /* 3 column width and so on */
    width:380px;
    margin-right:40px;
    float:left;
}
.col4 {
    width:520px;
    margin-right:40px;
    float:left;
}
.col5 {
    width:660px;
    margin-right:40px;
    float:left;
}
.col6 {
    width:800px;
    margin-right:40px;
    float:left;
}
.col7 {
    width:940px;
    margin-right:40px;
    float:left;
}
.col8 {
    width:1080px;
    margin-right:40px;
    float:left;
}

.blogimg{ /*combines properties of classes COL2 and CLEAR
    for easy use on the BLOG page */
    width:240px;
    margin-right:40px;
    float:left;
    clear:both!important;
    overflow:hidden;
}

.blogpost{ /*combines propoerties of classes COL4, SPACER, and RULE
    for easy use on the BLOG page */
    width:520px;
    margin-right:40px;
    float:left;
    padding-bottom:32px;
    border-top:1px solid #000000;
    padding-top:8px;
}

.clear { /* By default DIVs will fill in left to right until they
    fill the browser window width, at which point they
    break onto the next line below. To force an element
    to break onto the next line, add this class. */
    clear:both!important;
}

.img { /* Use this class on DIVs containing the project images.
    It removes extra padding below the DIV that is otherwise
    needed for other content. */
    padding-bottom:0px!important;
    margin-bottom:0px!important;
}

.spacer { /* Use this class to add extra space below elements
    that may need it. */
    padding-bottom:32px;
}

.rule{ /* Use this class to add a rule to the top of
    a DIV */
    border-top:1px solid #000000;
    padding-top:8px;
}


hr{ /*    Set horizontal rule style
    To manually insert rule into text use <hr> tag */
    border:0;
    height:1px;
    background:#000000;
    margin:9px 0px -10px 0px;
    clear:both;
}


/* 
 * Header / Navigation
 */



.page_link:after, .link_link:after{ /*Inserts slash after each link in header */
    content:" /";
    padding:0 1px 0 1px;
}

.page_link:after{ /*Specifies slash color after page links like Contact */
    color:#999999;
}

.link_link:after{ /*Specifies slash color after filter links like Full Programme */
    color:#cccccc;
}

.noslash:after{ /*    Specifies no slash after links classed as NOSLASH.
    Javascript is used to add the NOSLASH class automatically. */
    display:none;
}

.project_content iframe{
    float:left;
    margin: 0px 0px 32px 0px;
}

.project_header .project_index{
    display:none;
}

.project_index{
    display:inline;
    text-transform: capitalize;
}
.project_index a{
    text-decoration:none;
}

.link_link.activeFilter a{ /*Default highlight color for selected filter*/
    color:#07c400; 
}


#menu_4837997 a:hover, #menu_4837997.activeFilter a{ /*Hover and selected color for Full Programme*/
    color:#07c400;
}
#menu_4883002 a:hover, #menu_4883002.activeFilter a{ /*same for Digital*/
    color:#07c400;
}
#menu_4883088 a:hover, #menu_4883088.activeFilter a{ /*same for Animation*/
    color:#07c400;
}
#menu_4883057 a:hover, #menu_4883057.activeFilter a{ /*same for Motion*/
    color:#07c400;
}
#menu_4883099 a:hover, #menu_4883099.activeFilter a{ /*same for Illustration*/
    color:#07c400;
}
#menu_4883050 a:hover, #menu_4883050.activeFilter a{ /*same for Print*/
    color:#07c400;
}
#menu_4883043 a:hover, #menu_4883043.activeFilter a{ /*same for Identity*/
    color:#07c400;
}
#menu_4838009 a:hover, #menu_4838009.activeFilter a{ /*same for Studio Project*/
    color:#07c4000;
}

.header_img {
    padding: 20px 20px 0 27px;
    z-index: 99;
}

.nav_container { /* Metrics for DIV containing main navigation links */
    font-size: 16px;
    margin: 30px 0px 160px 30px;
    width: auto !important;
}

.nav_container div { /*Metrics for DIVs containing each link within navigation */
    float: left;
    margin-right: 4px;
}

.nav_container br {
    display: none;
}

.nav_pages a, .nav_container a {
    text-decoration: none;
}

.project_link a {
    color: #666666;
}

.project_link a:hover {/*
    background: #ffff00;
    color: #000000;*/
}

/*.project_link a:active {
    background: #000000;
    color: #ffffff;
}*/


.page_link a {
    color: #000000;
}

.page_link a:hover {
    color: #07c400;
}

.page_link a:active {
    color: #999999;
}

.link_link a, #menu_4982857 a {
    color: #999999;
    text-decoration: ;
}

.link_link a:hover {
    color: #07c400;
}

/*.link_link a:active {
    color: #666666;
}*/

.nav_active a {
    color: #07c400;
}

.nav_active a:hover {
    color: #07c400;
}

/*.nav_active a:active {
    background: #cccccc;
    color: #ffffff;
}*/

.nav_follow {
    display:none;
    color: #666666;
    z-index: 11;
}

.nav_follow a {
    color: #666666;
}

.nav_follow a:hover {
    color: #000000;
}

.nav_follow a:active {
    color: #999999;
}

.nav_container .view_tag_info {
    display:none;
    color: #666666;
    float: right;
    margin-right: 2px;
}

.view_tag_info a {
    color: #666666;
    
}

.view_tag_info a:hover {
    color: #000000;
}

.view_tag_info a:active {
    color: #999999;
}

/* 
 * Content
 */


#page_1 { /* metrics for container holding thumbnails. do not change */
    margin:0 0 0 0;
    padding:0 0 0 0;
}


#content_container { /* metrics for container common to every page
    edit this to change margins on main content */
    clear: both;
    margin: -80px 20px 20px 20px;
    position: relative;
    z-index: 10;
    width: auto !important;
}

#maincontainer { /* Another container that can be styled.
    Not needed so commented out
    background: transparent;
    display: none;
    margin: 0 2px 2px 0;
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px; */
}

.bodycopy a {
    color:#999999;
    text-decoration:none;
}

.bodycopy a:hover {
    color:#07c400;
}

.bodycopy a:active { /*
    background: #000000;
    color: #ffffff; */
}

.entry {
    padding: 0px 0px 0px 10px;
}

.project_title {
    position:absolute;
    color: #000000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: regular;
    width:240px;
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    padding:8px 0 9px 0;
}

.project_content {
    font-family:    Helvetica, Arial, sans-serif;
    overflow:hidden;
    margin-bottom:120px;
}


.project_content br{
    display:none;
}

.project_content div br{
    display:block;
}

.project_content div {
    margin-bottom:32px;
}

.project_content p { 
    overflow:visible;
    display:inline-block;

}

.project_content img{ /* Metrics for project page images.
    Set to automatically put space below each image */
    margin-bottom:32px;
}






.project_header {
    position: absolute;
    top: 0; right: 2px;
    height: 65px;
}

.project_header div {
    float: right;
}

.project_header a {
    /*
    background: #eeeeee;
    border-left: 1px solid #cccccc;
    color: #777777;
    display: block;
    float: right;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    text-decoration: none; */
}


/*.project_header .last a {
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
}*/

.project_divider {
    display: none;
}

/* Styling of default typographic headers and elements */

h1 {
    font-size: 22px;
    line-height: 165%;
}

h2 {
    font-size: 16px;
    line-height: 165%;
}

h3 {
    font-size: 14px;
    line-height: 150%;
}

blockquote {
    color: #666666;
    margin: 0;
}

/* 
 * Slideshows
 */

.slideshow_component {
    margin: 0 0 32px 0;
    padding: 0!important;
}

.slideshow_wrapper {
    clear:both;
    margin: 0!important;
    padding: 0!important;
}

.slideshow_container {
    clear:both;
    margin: 0!important;
    padding: 0!important;
}

.slideshow_wrapper a,
.slideshow_wrapper a:hover,
.slideshow_wrapper a:active {
    background: none !important;
}

.slideshow_nav {
    position:absolute;
    clear: both;
    color: #999999;
    font-size: 11px;
    line-height: 16px;
    padding-bottom: 10px;
    margin-top:-12px;
    margin-left:-108px;
}

.slideshow_nav.above {
    margin-top: -26px;
}

.slideshow_nav a {
    color: #bbbbbb;
    font-family:    Helvetica, Helvetica, Arial, sans-serif
    font-size: 11px;
    text-decoration: none;
}

.slideshow_nav a:hover {
    background: none !important;
    color: #999999;
    text-decoration: none;
}

.slideshow_count {
    color: #999999;
    font-size: 11px;
}

ul.slideshow_thumbs {
    margin: 0;
    padding: 0;
}

.slideshow_thumb {
    display: inline-block;
    list-style: none;
    margin: -3px 7px 7px -3px;
}

.slideshow_thumb a {
    background: none !important;
    border: 1px solid transparent;
    display: block;
    padding: 2px;
}

.slideshow_thumb a:hover {
    background: none !important;
    border: 1px solid #ccc;
}

a.activeSlide {
    background: none;
    border: 1px solid #ccc;
}

.slideshow_thumb a:active,
a.activeSlide:active {
    background: none !important;
    border: 1px solid #666;
}

.slideshow_thumb img {
    border: 0;
    display: block;
    margin: 0;
    height: 60px;
}

.slideshow_caption {
    clear: both;
    display: block;
    font-size: 14px;
    padding: 10px 0 5px 0;
}

/**
 * Fullscreen button
 */

a#fullscreen {
    background-color: #1a1a1a;
    background-image: url(/_gfx/fullscreen_open.png);
    background-repeat: no-repeat;
    background-position: 67px 3px;
    border: 1px solid #1a1a1a;
    color: #bbbbbb;
    display: block;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
    font-size: 11px;
    line-height: 18px;
    height: 19px;
    padding: 0 4px 0 5px;
    text-align: left;
    text-decoration: none;
    width: 74px;
}

a#fullscreen:hover {
    background-color: #fff;
    color: #000;
}

a#fullscreen:active {
    background-color: #fff;
    border: 1px solid #999;
    color: #666;
}

/* 
 * Project footer
 */

.project_footer {
    color: #999999;
    clear: both;
    font-family:    Helvetica, Helvetica, Arial, sans-serif;
    font-size: 9px;
    padding: 30px;
    width: 670px;
}

.comment_link a {
    
}

.comment_link a:hover {
    
}

.footer_title_type {
    color: #000000;
    font-weight: bold;
}

.project_views {
    color: #999999;
}

.project_footer .permalink {
    display: none;
}

.project_footer .permalink a {
    color: #999999;
}

.project_footer .permalink a:hover { /*
    background: #ffff00;
    color: #000000; */
}

.project_footer .permalink a:active {
    /*
    background: #000000;
    color: #ffffff;
    */
}

.tags {
    color: #999999;
}

.tags a {
    color: #000000;
    text-decoration: none;
}

.tags a:hover { /*
    background: #ffff00;
    text-decoration: none; */
}

.tags a:active {
    /*
    background: #000000;
    color: #ffffff;
    */
}

.tags a:visited {

}

.project_footer .editlink a {
    color: #0066ff;
    font-style: italic;
}

.project_footer .editlink a:hover {
    background: #ffff00;
    color: #000000;
}

.project_footer .editlink a:active {
    /*
    background: #000000;
    color: #ffffff;
    */
}

.project_bottom {
    clear: both;
    width: 670px;
}

/* 
 * Thumbnails
 */

.project_thumb {
    background: #transparent;
    cursor: pointer;
    float: left;
    margin: 0px 30px 60px 10px;
    padding: 0px 10px 10px 10px;
    position: static !important;
    width: 300px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}



.project_thumb:active {
    background: transparent;
    /*margin: 1px 0 -1px;
    -moz-box-shadow: 0px 00px 30px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
    z-index: 998;*/
}

.project_thumb .hover {
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}

.project_thumb .nohover {
    text-decoration: none;
}

.project_thumb:hover .thumb_title span {
    background: trasparent;
}

.project_thumb.active {
    background: #f2f2f2;
}

.project_thumb.active .cardimgcrop {
    opacity: 0.5;
}

.project_thumb.active .thumb_title span {
    color: #666666;
}

.project_thumb.active:hover .thumb_title span {
    background: none;
    color: #666666;
}

.project_thumb.active .thumb_tag {
    color: #555555;
    font-family:    Helvetica, Arial, sans-serif;
    font-size: 10px;
}

.project_thumb.active .thumb_tag a {
    color: #555555;
    text-decoration: none;
}

.project_thumb.active .thumb_tag a:hover {
    color: #cccccc;
    text-decoration: none;
}

.project_thumb.active .thumb_tag a:active {
    color: #999999;
    text-decoration: none;
}

.cardimgcrop {
    margin: 0px 0px 2px 0px;/*
    padding-top:25px;
    border-top:1px solid #000000;*/
    overflow: hidden;
    position: relative;
}

.loader_holder {
    display: none;
    position: absolute;
    top: 5px; left: 15px;
    z-index: 3;
}

.thumb_title {
    margin-bottom:5px;
}

.thumb_title .text {
    color: #000000;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: regular;
    line-height: 1.4;
    word-spacing: 0px;
    text-decoration: none;
    letter-spacing: -0.5px;
    display: inline-block;

    padding-bottom: 4px;
    margin-bottom: 10px;
    border-bottom: 0px solid #000000;
}

.excerpt {
    color: #666;
    font-family:    Helvetica, Arial, sans-serif;
    font-size: 10px;
    margin: 7px 0 10px 0;
    width: 220px;
}

.thumb_tag {
    background: none;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    left: 0px;
    margin-top:-7px;
    padding: 0;
    top:55%;
    z-index: 99;
    position: absolute;

    filter: alpha(opacity=00);
    opacity: 0;

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

.thumb_tag a {
    color: #000000;
    text-decoration:none;
}

.thumb_tag a:hover {
    color: #07c400;
    text-decoration:none;
}

.thumb_tag a:active {
    color: #999999;
    text-decoration:none;
}

/* 
 * Search results
 */

#search_form {
    position: fixed;
    bottom: 20px; left: 740px;
}

#search_form #search_term {
    font-size: 11px;
    width: 188px;
}

#search_form_results {
    padding-bottom: 90px;
}

.search_header {
    color: #000000;
    float: left;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin: 0;
    padding: 4px 0;
    width: 145px;
}

#search_term {
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #000000;
    float: left;
    font-family:    Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 5px;
    width: 220px;
}

#search_results {
    float: left;
}

.result {
    clear: both;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 60px;
}

.search_thumb {
    float: left;
    margin: 4px 25px 35px 0px;
}

.search_thumb img {
    width: 120px; height: auto;
}

.search_text {
    width: 500px;
    margin-left: 145px;
}

.search_title a {
    color: #000000;
    font-weight: bold;
    text-decoration: underline;    
}

.search_title a:hover {
    /*
    background: #ffff00;
    color: #000000;
    text-decoration: none;
    */
}

.search_title a:active {
    /*
    background: #000000;
    color: #ffffff;
    text-decoration: none;
    */
}

.search_tags {
    color: #999999;
    font-size: 11px;
}

.search_tags a {
    color: #999999;
    text-decoration: none;
}

.search_tags a:hover {
    background: none;
    color: #000000;
    text-decoration: underline;
}

.search_tags a:active {
    color: #666666;
}

/* 
 * Footer
 */

#page_footer {
    color: #666666;
    height: 60px;
    margin: 60px 20px 0 20px;
    position: relative;
}
#page_footer br {
    display: none !important;
}

.pagination {
    color: #999999;
    float: left;
    font-size: 14px;
}

.pagination a {
    color: #000000;
    font-size: 14px;
    text-decoration: none;
}

.pagination a:hover {
    background: transparent;
    color: #000000;
    text-decoration: underline;
}

.pagination a:active {
    color: #666666;
}

.cargo_link {
    color: #999999;
    font-size: 11px;
    float: right;
    margin: 3px 4px 0 0;
}

.cargo_link a {
    color: #999999;
    text-decoration: underline;
}

.cargo_link a:hover {
    color: #333333;
    text-decoration: underline;
}

.cargo_link a:active {
    color: #666666;
}

.bottompad {
    clear: both;
    position: relative;
    height: 54px;
    width: 705px;
}

/* 
 * Video component
 */

.video_component {
    float: left;
    margin: 0 15px 15px 0;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* 
 * Audio component
 */

.audio_component {
    color: #777777;
    font-family: 'Droid Sans Mono', Monaco, Monospace, Arial, san-serif;
    font-size: 10px;
    height: 30px;
    line-height: 26px;
    width: 300px;
}

.audio_component div {
    height: 26px;
}

.audio_component .border {
    border: 2px solid #aaaaaa;
    opacity: 0.5;
    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

.audio_component .vertical_border {
    background: #aaaaaa;
    opacity: 0.50;
    
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

.audio_component .controls {
    top: 2px; left: 2px;
}

.audio_component .play_pause {
    background: url("/_gfx/playpause.png");    
}

.audio_component .spectrum .spectrum_bar {
    background: #666666;
}

.audio_component .loading {
    background: #bbbbbb;
    opacity: 0.25;
    
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
}

.audio_component .progress {
    background: #bbbbbb;
    border-right: 1px dotted #333333;
    opacity: 0.25;
    
    filter: alpha(opacity=25);
    -moz-opacity: 0.25;
    -khtml-opacity: 0.25;
}

.audio_component .volume_slide.hover {
    background: #bbbbbb;
    opacity: 0.3;

    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
}

/* 
 * Other
 */

/* Admin and following icons — only seen by members */
.toolset {
    position: fixed;
    top: 10px; right: 10px;
    z-index: 9999;
}

#foot_container {
    display: none;
}

#nav_loadspin {
    display: none !important;
}

.project_thumb:hover .cardimgcrop img {
    opacity: .50;
    filter: alpha(opacity=50);
}
.cardimgcrop img {
    opacity: 3;
    filter: alpha(opacity=100);

    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
}

.project_thumb:hover .thumb_title{
    filter: alpha(opacity=100);
    opacity: 3;
}

.project_thumb:hover .thumb_tag{
    filter: alpha(opacity=100);
    opacity: 1;
}

.thumb_tag {
    color: #000000;
    font-family: Helvetica, Helvetica, Arial, sans-serif; /*Courier New, Courier, monospace;*/
    margin-top:10px;
    font-size: 10px;
    font-weight: regular;
    line-height: 1.5;
    word-spacing: 1px;
    text-decoration: none;
    letter-spacing: 0.5px;
    display: inline-block;
}

.project_content br {
    clear: none !important;
}
.thumb_title {
    white-space: normal !important;
}

/* css added by buffalo */

@-moz-document url-prefix() { 
    hr    {
        margin: 16px 0 9px 0;
    }
}

.home #content_container {
    min-width: 0 !important;    
}



.project_content img {
    *padding-bottom: 32px;
    *margin-bottom: 0;
}

.nav_container div {
    *display: inline;
}

.nav_container .project_index {
    *clear: none !important;
}

#menu_4985303 {
    *width: 1150px;    
}

.link_link a {
    *white-space: nowrap;
}

.project_thumb {
    width: 300px;
    height: 240px;
    padding: 0px;
    margin: 0 10px 0 10px;
}

.cardimgcrop img {
    width: 300px;
    height: auto;
}

.masoned {
    height: auto !important;
}

#page_footer {
    display: none;
}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
}

/* iPhone */
@media only screen
and (min-width : 320px)
and (max-width : 767px) {

    body {
        min-width: 0;
        max-width: 767px;
       /* overflow: hidden;*/
    }

    .nav_container {    
       width: auto !important;
       margin: 20px 0px 160px 20px;
    }

    .project_title {
        width: auto !important;
        position: static;
    }

    .col2 {
        width: auto;
        margin-right: 0;
        float: none;
    }

    .col4 {
        
    }

    .col8 {
        margin-right: 0;
        width: auto;
    }

    .project_content {
        margin-top: -20px;
    }

    .project_content img {
        max-width: auto;
        height: auto;
        width: 100%;
    }

    .col6 {
        width: auto;
        margin-right: 0;
    }

    .blogimg {
        width: auto;
    }

    .mobile .blogpost {
        width: auto;
    }

    .masoned {
        width: auto !important;
        margin-right: -16px !important;
    }

    .project_thumb {
        width: 100%;
        height: auto;
        margin: 0 16px 16px 0;
    }

    .cardimgcrop img {
        width: 100%;
    }

    .mobile iframe {
        width: 100%;
        height: 302px;
    }

    .masoned {
        margin-left: 10px !important;
    }

    .mobile #toolset {
        display: none;
    }

    #content_container {
        margin: -80px 20px 20px 20px;
    }

    .entry {
        padding: 0;
    }
}

/* iPad landscape */
@media only screen
and (min-width : 1024px)
and (max-width : 1200px) {
    
    body {
        min-width: 0 !important;
        -webkit-text-size-adjust:none;
    }

    .nav_container {    
        margin: 30px 30px 160px 30px;
        min-width: 0 !important;
        width: 964px !important;
        overflow: hidden;
    }

    .project_title {
        width: 212px;
        padding: 8px 0;
    }

    .project_content div {
        margin-bottom: 20px;
    }

    .col2 {
        margin-right: 30px;
        width: 212px;
    }

    .col4 {
        margin-right: 30px;
        width: 722px;
    }

    .col8 {
        margin-right: 0;
        width: 964px;
    }

    .first {
        margin-top: 50px;
        padding-top: 0;
    }

    .project_content div {
        margin-bottom: 20px;
    }

    .project_content img {
        margin-bottom: 20px;
        max-width: 722px;
        height: auto;
    }

    .col6 {
        margin: 0 !important;
        width: 500px;
    }

    #entry_4982857 .col6 {
        width: 960px !important;
    }

    #entry_4982857 .col6 img {
        max-width: 960px;
        width: 960px;
    }

    .project_content {
        margin-bottom: 0;
    }

    hr {
        display: block;
        margin: 12px 0;
    }

    iframe {
        width: 100%;
        height: 482px;
    }

    .mobile .googleMap iframe {
        display: block;
    }

    .mobile .blogimg {
        margin: 0 30px 0 0 !important;
        width: 212px;
    }

    .mobile .blogpost {
        margin-right: 0;
        padding-bottom: 20px;
        padding-top: 12px;
        width: 722px;
    }

    .mobile .masoned {
        width: 1024px;
        position: relative;
        margin-right: 60px !important;
        height: auto !important;
    }

    .mobile .cardimgcrop {
        margin: 0;
    }

    .mobile .cardimgcrop img {
        width: 228px;
        height: auto;
    }

    .mobile #page_footer {
        display: none;
    }


    .mobile .project_thumb {
        margin: 0 10px 0 10px;
        padding: 0px;
        position: relative !important;
        width: 228px;
        height: 191px;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    .mobile #content_container {
        width: 1024px !important;
    }

}

/* iPad portrait */
@media only screen
and (min-width : 768px)
and (max-width : 1023px) {
    
    body {
        min-width: 0 !important;
        -webkit-text-size-adjust:none;
    }

    .nav_container {    
        margin: 30px 30px 160px 30px;
        min-width: 0 !important;
        width: 768px !important;
        overflow: hidden;
    }

    .project_title {
        width: 212px;
        padding: 8px 0;
    }

    .project_content div {
        margin-bottom: 20px;
    }

    .col2 {
        margin-right: 30px;
        width: 212px;
    }

    .col4 {
        margin-right: 30px;
        width: 722px;
    }

    .col8 {
        margin-right: 0;
        width: 964px;
    }

    .first {
        margin-top: 50px;
        padding-top: 0;
    }

    .project_content div {
        margin-bottom: 20px;
    }

   .project_content img {
        margin-bottom: 20px;
        max-width: 480px;
        height: auto;
    }

    .col6 {
        margin: 0 !important;
        width: 470px;
    }

    #entry_4982857 .col6 {
        width: 700px !important;
    }

    #entry_4982857 .col6 img {
        max-width: 700px !important;
    }

    .project_content {
        margin-bottom: 0;
    }

    hr {
        display: block;
        margin: 12px 0;
    }

    iframe {
        width: 100%;
        height: 482px;
    }

    .mobile .googleMap iframe {
        display: block;
    }

    .mobile .blogimg {
        margin: 0 30px 0 0 !important;
        width: 212px;
    }

    .mobile .blogpost {
        margin-right: 0;
        padding-bottom: 20px;
        padding-top: 12px;
        width: 722px;
    }

    .mobile .masoned {
        width: auto !important;
        position: relative;
        margin-right: 60px !important;
        height: auto !important;
    }

    .mobile .cardimgcrop {
        margin: 0;
    }

    .mobile .cardimgcrop img {
        width: 100%;
        height: auto;
    }

    .mobile #page_footer {
        display: none;
    }

    .mobile .project_thumb {
        margin: 0 10px 0 10px;
        padding: 0px;
        position: relative !important;
        width: 222px;
        height: 188px;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    .mobile #content_container {
        width: auto !important;
    }
}