@charset "UTF-8";
/* CSS Document */

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 488px;
}

/*  Fonts */
@font-face {
    font-family: 'meta_lfregular';
    src: url('../font/meta_lf_medium-webfont.eot');
    src: url('../font/meta_lf_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/meta_lf_medium-webfont.woff') format('woff'),
         url('../font/meta_lf_medium-webfont.ttf') format('truetype'),
         url('../font/meta_lf_medium-webfont.svg#meta_lfregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metaplusmediumregular';
    src: url('../font/metaplusmedium-roman-webfont.eot');
    src: url('../font/metaplusmedium-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/metaplusmedium-roman-webfont.woff') format('woff'),
         url('../font/metaplusmedium-roman-webfont.ttf') format('truetype'),
         url('../font/metaplusmedium-roman-webfont.svg#metaplusmediumregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metaplusnormal-_capsregular';
    src: url('../font/metaplusnormal-caps-webfont.eot');
    src: url('../font/metaplusnormal-caps-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/metaplusnormal-caps-webfont.woff') format('woff'),
         url('../font/metaplusnormal-caps-webfont.ttf') format('truetype'),
         url('../font/metaplusnormal-caps-webfont.svg#metaplusnormal-_capsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metaplusnormalitalic';
    src: url('../font/metaplusnormal-italic-webfont.eot');
    src: url('../font/metaplusnormal-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/metaplusnormal-italic-webfont.woff') format('woff'),
         url('../font/metaplusnormal-italic-webfont.ttf') format('truetype'),
         url('../font/metaplusnormal-italic-webfont.svg#metaplusnormalitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metaplusnormalregular';
    src: url('../font/metaplusnormal-roman-webfont.eot');
    src: url('../font/metaplusnormal-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/metaplusnormal-roman-webfont.woff') format('woff'),
         url('../font/metaplusnormal-roman-webfont.ttf') format('truetype'),
         url('../font/metaplusnormal-roman-webfont.svg#metaplusnormalregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metaserif-bookbook';
    src: url('../font/metaserif-book-webfont.eot');
    src: url('../font/metaserif-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/metaserif-book-webfont.woff') format('woff'),
         url('../font/metaserif-book-webfont.ttf') format('truetype'),
         url('../font/metaserif-book-webfont.svg#metaserif-bookbook') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metaserif-bookitabookita';
    src: url('../font/metaserif-bookita-webfont.eot');
    src: url('../font/metaserif-bookita-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/metaserif-bookita-webfont.woff') format('woff'),
         url('../font/metaserif-bookita-webfont.ttf') format('truetype'),
         url('../font/metaserif-bookita-webfont.svg#metaserif-bookitabookita') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*  General */
body {background:#FFFFFF;}

a { color: #4a89a7; text-decoration:none;}
a:visited { color: ; }
a:hover { color: #4a89a7;text-decoration:underline; }
a:focus { outline: none; }
a:hover, a:active { outline: 0; }

h1 {color:#df6d27; font-size:30px; font-family:metaplusmediumregular, Arial, Helvetica, sans-serif;font-weight: normal;margin-top:45px;margin-bottom:45px;}
h2 {color:#898989; font-size:18px; font-family:metaserif-bookbook, Georgia, "Times New Roman", Times, serif; font-weight:normal;font-style:italic;}
h3 {color:#898989; font-size:18px; font-family:metaserif-bookbook, Georgia, "Times New Roman", Times, serif; font-weight:normal;font-style:italic;text-align: center;}
	

/*  Large Sections, container, floats */
	
#header {height:75px;position:fixed;background:#111111;z-index:99; width: 100%;}

#main_image { display:block;min-width:1024px; position: relative; overflow: hidden;}
#main_image .main { width: 100%; position: absolute; top:55px; left: 0; }
#main_image .shadow { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; }

#footer {height:60px;background:#111111; border-top:3px solid #df6d27;min-width: 1024px;font-family:metaplusmediumregular, Arial, Helvetica, sans-serif;font-size:14px;color:#7c7c7c;}

.container { max-width:960px; margin-left:auto;margin-right:auto;}
.clear {clear:both;}
.left {float:left;}
.right {float:right;}


/*  Header */

.logo {background:url(../img/tm-logo.png) no-repeat; height:50px; width:200px;float:left;margin-top:10px;}

.nav_sub {float:right; padding-top:25px;font-family:metaplusmediumregular, Arial, Helvetica, sans-serif;font-size:18px;} 
	.nav_sub a {margin-left:50px; color:#e4e4e4;text-decoration:none;}
	.nav_sub a:hover { color:#df6d27; text-decoration:none;}


/*  About */

.about_left {float:left;width:463px;margin-right:40px;font-family:metaplusnormalregular, Arial, Helvetica, sans-serif;color:#ffffff;}
.about_left_intro {font-size:22px; line-height:40px;margin-bottom:10px;}
.about_left_sub {font-size:16px; line-height:30px;margin-bottom: 50px;}

.about_right {float:left;margin-top:10px;width:457px;color:#ffffff;}
.about_right_role {width:150px;float:left;text-align:center;}
.crest_pm {background:url(../img/crest-pm.png); height:125px;width:125px;margin: 10px 0px 30px 15px;}
.crest_design {background:url(../img/crest-design.png); height:125px;width:125px;margin: 10px 0px 30px 15px;}
.crest_dev {background:url(../img/crest-dev.png); height:125px;width:125px;margin: 10px 0px 30px 15px;}
.label_role {color:#898989;font-family:metaplusmediumregular, Arial, Helvetica, sans-serif;font-size:15px;margin-bottom:10px;text-transform: uppercase;}
.desc_role {font-size:14px;color:#898989;font-family:metaplusnormalregular, Arial, Helvetica, sans-serif; margin-bottom: 1px;}





/*  Work */

.work {background:#f3f3f3;clear:both;padding-top: 1px;} 
.project_left {float:left;width:310px; margin-right:15px;}
.project_mid {float:left;width:310px; margin-right:15px;}
.project_right {float:left;width:310px;}


.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.interior {
  display: inline-block;
  height: 240px;
  margin: 0 15px 10px 0; 
  position: relative;
  width: 315px;
}


span.text-content {
  background: rgba(0,0,0,0.65);
  color: white;
  display: table;
  height: 100%;
  padding:15px;
  left: 0;
  position: absolute;
  top: 0;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

span.text-content div {
  display: table-row;
}

span.text-content div.client {
    font-family:metaserif-bookbook, Georgia, "Times New Roman", Times, serif;
    font-size:14px;
    font-style: italic;
    font-weight: bold;
    color:#dfdfdd;
    height:20px;
}
span.text-content div.title {
    font-family:metaplusnormalregular, Arial, Helvetica, sans-serif;
    font-size:30px;
    line-height: 30px;
    height:32px;
}
span.text-content div.descr {
    font-family:metaplusnormalregular, Arial, Helvetica, sans-serif;
    font-size:14px;
}

.interior:hover span.text-content {
  opacity: 1;
}

.interior_large {
  display: inline-block;
  margin: 0 0 10px 0; 
  position: relative;
  width: 640px;
}
span.text-content div.descr_large {
    font-family:metaplusnormalregular, Arial, Helvetica, sans-serif;
    font-size:18px;
    line-height: 30px;
}

.interior_large:hover span.text-content {
  opacity: 1;
}



.project_thumb_003 {background:url(../img/project_003.jpg);width:640px; height:490px; }
.project_thumb_003:hover {background:url(../img/project_003.jpg) 0px -490px;}

.client_box {width:960px;padding:5px;}
.client_list {float:left;width:200px;margin:10px 50px 45px 0px;}
.client_list_r {float:left;width:200px;margin:10px 0px 45px 0px;}
.client_names {font-size:14px;padding-bottom:8px;font-family:metaplusnormalregular, Arial, Helvetica, sans-serif;}


/*  Life */

.life {background:#313135;clear:both;padding-top: 1px;padding-bottom: 50px;}
.photo_container {width:980px;clear:both;}

.photo {margin:2px;margin-bottom:2px;float:left;}

.photo_001 {background:url(../img/photo_001.jpg);width:190px;height:190px;}
.photo_002 {background:url(../img/photo_002.jpg);width:190px;height:190px;}
.photo_003 {background:url(../img/photo_003.jpg);width:190px;height:190px;}
.photo_004 {background:url(../img/photo_004.jpg);width:190px;height:190px;}
.photo_005 {background:url(../img/photo_005.jpg);width:190px;height:190px;}
.photo_006 {background:url(../img/photo_006.jpg);width:190px;height:190px;}
.photo_007 {background:url(../img/photo_007.jpg);width:190px;height:190px;}
.photo_008 {background:url(../img/photo_008.jpg);width:190px;height:190px;}
.photo_009 {background:url(../img/photo_009.jpg);width:190px;height:190px;}
.photo_010 {background:url(../img/photo_010.jpg);width:190px;height:190px;}
.photo_011 {background:url(../img/photo_011.jpg);width:190px;height:190px;}
.photo_012 {background:url(../img/photo_012.jpg);width:190px;height:190px;}
.photo_013 {background:url(../img/photo_013.jpg);width:190px;height:190px;}
.photo_014 {background:url(../img/photo_014.jpg);width:190px;height:190px;}
.photo_015 {background:url(../img/photo_015.jpg);width:190px;height:190px;}

.photo_name {font-size:17px;font-family:metaserif-bookitabookita, Georgia, "Times New Roman", Times, serif;}
.photo_role {font-size:13px;color:#898989;font-family:metaplusnormalitalic, Arial, Helvetica, sans-serif;}


/*  Contact */

.map {background:url(../img/map.jpg); width:635px; height:260px;float:left;}
.contact {float:right;width:295px;margin-top: 15px;}
.contact_label {float:left;width:95px;margin-right:20px;}
.contact_label_indiv {text-transform:uppercase; font-family:meta_lfregular, Arial, Helvetica, sans-serif;font-size:12px;color:#7c7c7c;text-align:right;padding-bottom:8px;height:15px;}
.contact_values {float:right;width:170px;}
.contact_values_indiv {font-family:metaplusnormalregular, Arial, Helvetica, sans-serif;font-size:14px;color:#7c7c7c;text-align:left; padding-bottom:8px;height:15px;}
.social_icons {margin-top: 5px;margin-right: 30px;float:right;}
.social_twitter {background:url(../img/btn_twitter.png); height:40px; width:40px;margin-left:5px;display:inline-block;}
.social_twitter:hover {background:url(../img/btn_twitter.png) -40px; height:40px; width:40px;margin-left:5px;display:inline-block;}
.social_flickr {background:url(../img/btn_flickr.png); height:40px; width:40px;;margin-left:5px;display:inline-block;}
.social_flickr:hover {background:url(../img/btn_flickr.png) -40px; height:40px; width:40px;;margin-left:5px;display:inline-block;}
.social_vimeo {background:url(../img/btn_vimeo.png); height:40px; width:40px;margin-left:5px;display:inline-block;}
.social_vimeo:hover {background:url(../img/btn_vimeo.png) -40px; height:40px; width:40px;margin-left:5px;display:inline-block;}


/*  Footer */

.footer_push {height:100px;clear:both;}
.footer_left {float:left;padding-top:25px;} 
.footer_right {float:right; padding-top:25px;} 
    .footer_right a {margin-left:25px; color:#7c7c7c;text-decoration:none;}
    .footer_right a:hover {color:#df6d27; text-decoration:none;}









/* Responsive Styles */

.interior_large {
  float: right;
  width: 636.6667px;
}

.interior {
  float: left;
  width: 313.3333px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.interior_large, .interior {
  overflow: hidden;
}

.interior.last {
  margin-right: 0;
}

* {
    position: relative;
    box-sizing: border-box;
}

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

.main_image {
    /*height: 528px;*/
    /*background: url(../img/bg-cover-05.jpg) center center no-repeat;*/
    /*background-size: cover;*/
}

.work_img {
  height: 240px;
}

.work_img.large {
  width: 100%;
  height: 490px;
}

span.text-content {
  display: block;
}

.project_001 {
  background: url(../img/project_001.jpg) center center no-repeat;
}

.project_002 {
  background: url(../img/project_002.jpg) right center no-repeat;
}

.project_003 {
  background: url(../img/project_003.jpg) left center no-repeat;
}

.project_004 {
  background: url(../img/project_004.jpg) center center no-repeat;
}

.project_005 {
  background: url(../img/project_005.jpg) right center no-repeat;
}

.project_006 {
  background: url(../img/project_006.jpg) left center no-repeat;
}

.project_007 {
  background: url(../img/project_007.jpg) left center no-repeat;
}

.project_008 {
  background: url(../img/project_008.jpg) left center no-repeat;
}

.project_009 {
  background: url(../img/project_009.jpg) left center no-repeat;
}

.blank {
  height: 0;
}

.descr, .descr_large {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
  width: 100%;
  padding: 15px;
}

.descr_large {
  width: 66%;
}

.text-content {
  width: 100%;
}

/* Clearfix */
.clearfix:before,
.clearfix:after { content: " "; display: table;}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


@media (max-width: 1024px) {
    .work_grid {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    span.text-content {
      position: relative;
      display: block;
      opacity: 1;
      background: transparent;
    }
    .img_group {
      -webkit-box-ordinal-group: 0;
      -webkit-order: -1;
      -ms-flex-order: -1;
      order: -1;
    }
    .interior, .interior_large {
      float: none;
      background: #383838;
    }
    .interior_large {
      width: calc(66.6666% - 3.3333px);
      /*height: auto;*/
      /*margin-bottom: 17px;*/
    }
    .work_img.large {

    }
    .interior, .img_group {
      width: calc(33.3333% - 6.6667px);
      /*height: auto;*/
    }
    .interior {
      height: auto;
    }
    .img_group {
      width: calc(33.3333% - 6.6667px);
      /*height: auto;*/
    }
    .img_group .interior {
      width: 100%;
    }
    .interior {
      margin-right: 0;
    }
    #main_image {
        width: 100%;
        min-width: 0;
    }
    .container {
        padding: 0 20px;
    }
    .about_left, .about_right, .project_left, .project_right {
        width: 100%;
        margin-right: 0;
    }
    .about_right {
        padding-bottom: 50px;
    }
    .project_left.double {
        width: 100%;
    }
    .project_left.double [class^="project_thumb"] {
        float: left;
        width: 50%;
    }
    .project_right.large {
        width: 100%;
    }
    .project_right.large [class^="project_thumb"] {
        width: 100%;
    }
    [class^="project_thumb"] {
        width: 100%;
        background-size: 100%;
    }
    [class^="project_thumb"]:hover {
        background-repeat: no-repeat;
    }
    .about_right_role {
        width: 33.3333%;
    }
    [class^="crest_"] {background-position: center center; background-repeat: no-repeat; width: 100%; margin: 10px 0 30px 0;}
    .project_left, .project_mid, .project_right {
        float: left;
        width: 50%;
    }
    .project_mid {
        margin-right: 0;
    }
    .project_mid [class^="project_thumb"] {
        width: 100%;
    }
    .clear + .project_left [class^="project_thumb"] {
        width: 100%;
    }
    .client_box {
        width: 100%;
    }
    [class^="client_list"] {
        width: 25%;
        margin-right: 0;
    }
    .map {
        width: 100%;
    }
    #footer {
        width: 100%;
        min-width: 0;
    }
    #footer .container {
        width: 100%;
    }
    .photo_container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .photo_container .photo, .blank {
      width: calc(20% - 2px);
      margin: 0 0 2px;
      background-size: cover;
    }
    [class^="interior"] {
      max-width: 100%;
    }
    .descr, .descr_large {
      position: relative;
      top: auto;
      left: auto;
      -webkit-transform: none;
      width: 100%;
      padding: 0;
    }
    .contact {
        float: left;
        width: 50%;
    }
    .contact_values {
      float: left;
      width: auto;
    }
    .social_icons {
      float: left;
      margin-left: 20px;
      margin-right: 20px;
    }
    .contact {
      text-align: center;
    }
    .contact-content {
      display: inline-block;
    }
    .social_icons {
      clear: left;
    }
    .contact .left {
      width: 100%;
      text-align: center;
    }
}

@media (max-width: 850px) {
    [class^="client_list"] {
        width: 50%;
        text-align: center;
    }
    .contact {
        float: left;
        width: 50%;
    }
    .interior {
      width: calc(50% - 5px);
    }
    .work_img {
        background-size: cover;
        background-position: bottom-left center;
    }
    .img_group {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-ordinal-group: 1;
        -webkit-order: 0;
        -ms-flex-order: 0;
        order: 0;
        width: 100%;
    }
    .img_group .interior {
      width: calc(50% - 5px);
    }
    .interior_large {
      width: 100%;
    }
    .photo_container .photo, .blank {
      width: calc(33.3333% - 2px);
      margin: 0 0 2px;
      background-size: cover;
    }
    .photo_container .photo, .blank {
      width: calc(25% - 2px);
    }
}

@media (max-width: 620px) {
    .nav_sub a:first-child {
        margin-left: 0;
    }
    .nav_sub a {
        margin-left: 20px;
    }
    [class^="client_list"] {
        width: 50%;
        margin-right: 0;

    }
    .contact {
        /*width: 100%;*/
    }
    .contact_label {
      width: auto;
    }
    .photo_container .photo, .blank {
      width: calc(33.3333% - 1px);
      margin: 0 0 2px;
      background-size: cover;
    }
}

@media (max-width: 500px) {
    .interior {
      width: 100%;
    }
    .interior_large .work_img {
      height: 360px;
    }
    .logo {
        width: 48px;
    }
    .nav_sub a {
        margin-left: 10px;
    }
    .about_right_role {
        width: 100%;
    }
    [class^="crest_"] {
        float: left;
        width: 125px;
        margin-top: 0px;
    }
    .label_role {
        margin-top: 20px;
    }
    .photo {
        width: 50%;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .footer_left, .footer_right {
        width: 100%;
        text-align: center;
    }
    .footer_right a:first-child {
        margin-left: 0;       
    }
    .footer_right {
        padding-bottom: 20px;
    }
    .footer_left {
        padding-bottom: 10px;
    }
    #footer {
        height: auto;
    }
    .img_group .interior {
      width: 100%;
    }
    .photo_container .photo, .blank {
      width: calc(50% - 1px);
      margin: 0 0 2px;
      background-size: cover;
    }
    .contact {
      width: 100%;
    }

}

@media (max-width: 360px) {
    .work_img.large {
      height: 240px;
    }
    .photo {
      height: 140px;
    }
}