/* Global */
.home_title {
	text-align:center;
}
.home_title p {
	letter-spacing: .3rem;
}

img {
  position: relative;
  max-width: 100%;
}

body {
  font-size: 1.7em;
}


.logo {
  position: relative;
  max-width: 1.5em;
}


strong{
    font-weight:600;
}

.workz h4 {
    text-align: center;
    padding-bottom: .5em;
    margin-top: 2.75em;
}



/* Form Swag */

label {
    font-weight: 100;
    text-align: left;
}


form {
    width: 100%;
}

input {
     width: 100%;   
}

textarea {
    resize: vertical;
    overflow: auto;
    width: 100%;
    height: 10em;
}

.contact_button {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #fff;
    color: #000;
    font-size: 1.2em;
    line-height: 1.8;
    height: 2.75em;
    border: 1px solid #000;
    padding: 1em 0 1em 0;
    height: 2em;
    text-align: center;
}


.contact_button:hover {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

/* Links */
a {
  color: #000;
  text-decoration: none;
}


@media (min-width: 550px) {    
a:hover {
  color: #000;
}

a img:hover {
  opacity: .25;
}

.nav a:hover {
    color: #000;
    padding-bottom: .5em;
    border-bottom: 1px solid #000;
}}

.viewall {
    color: #000;
    padding-bottom: .5em;
    border-bottom: 1px solid #000;
}


/* Construction Elements */

#intro {
    margin-top: 2.5em;
    margin-bottom: 2em;
    width: 90%;
}


@media (min-width: 550px) { 
#intro {
    margin-top: 2em;
    margin-bottom: 2em;
    width: 100%;    
}}


#home {
    margin-top: 1.25em;
}

#featured img{
    margin-bottom: 2em;
}

/* Larger than phablet */
@media (min-width: 550px) {    
#featured {
    margin-bottom: 10em;
}}



/* Navigation: Featured */   


.nav {
    text-align: center;
    vertical-align: text-top;
    display: none;
}


.nav li:hover  { 
    opacity: .25;
}

.nav li,  .viewall li  {
    list-style: none;
	display: inline-block;
}

.mobile-logo{
    width: 32px;
    position: absolute;
    top: 20px;
    left: 5%;
    transition: all .15s cubic-bezier(.25,.1,.25,1);
}

.mobile-header{
    width: 100%;
    height: 70px;
    background: #ffffff;
    position: fixed;
    top: 0;
    z-index: 10;
}

@media (min-width: 550px) {  
.mobile-header{
    width: 100%;
    height: 70px;
    position: fixed;
    top: 0;
    z-index: 10;
}}

.mobile-header-splash {
    background-color: transparent;
}

.mobile-toggle{
    width: 24px;
    height: 17px;
    background: url('../images/burger.svg');
    position: absolute;
    top: 25px;
    right: 5%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}
.mobile-tag{
    width: 24px;
    position: absolute;
    bottom: 4%;
    left: 5%;
    transform: translateX(-80px);
    transition: all .15s cubic-bezier(.25,.1,.25,1);
}
.mobile-nav{
  width: 100vw;
    height: 100vh;
    visibility: visible;
    display: block;
    position: fixed;
}
.mobile-nav ul{
  list-style: none;
    text-align: right;
    padding: 20px;
    margin-top: 50px;
    font-size: 20px;
}

body.nav-open{
  overflow: hidden;
}
body.nav-open .container{
  transform: translateX(-100%);
  opacity: 0;
}

body.nav-open .container_header{
  transform: translateX(-100%);
  opacity: 0;
}

body.nav-open .container_footer{
  transform: translateX(-100%);
  opacity: 0;
}

body.nav-open .mobile-nav{
  display: block;
}
body.nav-open .mobile-nav li{
  transform:translateX(0px);
}
body.nav-open .mobile-tag{
   transform:translateX(0px); 
}
.container, .container_header, .container_footer {
  transition: all .15s cubic-bezier(.25,.1,.25,1);
}

.mobile-nav h4 {
    padding: 0;
    margin: 0 0 25px;
}
.mobile-nav li{
  position: relative;
  padding-right: 40px;
  transform: translateX(100%);
  transition: all 0.3s cubic-bezier(.25,.1,.25,1);
}
body.nav-open .mobile-nav li:nth-child(1){
  transition-delay: 0s;
}
body.nav-open .mobile-nav li:nth-child(2){
  transition-delay: .09s;
}
body.nav-open .mobile-nav li:nth-child(3){
  transition-delay: .16s;
}
body.nav-open .mobile-nav li:nth-child(4){
  transition-delay: .2s;
}
body.nav-open .mobile-nav li:nth-child(5){
  transition-delay: .24s;
}
body.nav-open .mobile-logo{
  transform: translateX(-100vw);
}
body.nav-open .mobile-toggle{
    background-image: url(../images/close.svg);
    background-position-x: 5px;
}
.mobile-nav li{
  transition-delay: 0s;
}

.mobile-nav li:after {
    display: block;
    content: "—";
    position: absolute;
    top: 2px;
    right: 0;
}
@media (min-width: 680px) {
  .nav,
  .viewall {
    display: block;
    margin-bottom: 1em;
  }
  .nav li {
    list-style: none;
    padding-right: 1em;
	padding-left: 1em;
  }
  .nav-rt,
  .logo {
    display: block;
  }
  .nav-rt li {
    list-style: none;
    float: left;
    font-size: .75em;
    padding-left: 3em;
    margin-top: -.25em;
    display: block;
  }
  .mobile-nav {
    visibility: hidden;
  }
  .viewall li {
    list-style: none;
  }
  .viewall-button {
    padding-bottom: .5em;
    border-bottom: 1px solid #000;
  }
  .mobile-header {
    display: none;
  }
}



/* Work Section */   

.filtered{
  opacity: .1;

}
body.work .four.columns{
    transition: opacity .15s ease;
}

.work-thumb {
    margin-top: .5em;
    text-align: center;
    font-size: 1.414em;
    margin-bottom: 0.2em;
}

/* Larger than phablet */
@media (min-width: 550px) {    
.work-thumb {
    text-align: left;
    font-size: 1.2em;
    margin-bottom: 0.45em;   
    }}


.work-thumb-desc {
    margin-top: 0em;
    text-align: center;
    font-size: 1em;
    margin-bottom: 1.8em;
}

/* Larger than phablet */
@media (min-width: 550px) {    
.work-thumb-desc {
    text-align: left;
    }}


.text_work_head {
    text-align: center;
    margin-bottom: 1.4em;
}

    
/* Larger than phablet */
@media (min-width: 550px) {   
	.work-cat {
		text-align: left;
    	font-size: 0.6em;
    	letter-spacing: .3em;
		text-transform: uppercase;
    	font-weight: 600;
    	margin-bottom: 1em;
    	margin-top: 1em;
		font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	.work-title {
		margin-bottom: 0;
		font-size:1.2em;
	}
	.work-desc {
		margin-bottom:60px;
	}
}

.text_desc_title {
    font-size: 0.618em;
    letter-spacing: .2em;
    line-height: 11.86px;
    font-weight: 600;
    margin-bottom: .8em;
    text-transform: uppercase;
    font-family: "proxima-nova";
    text-align: center;
}



.text_desc {
    margin-bottom: 4em;
    font-size: 1.2em;
    line-height: 1.4em;
    text-align: center;
}


#footer .text_desc {
    margin-bottom: 4em;
    font-size: 1.4em;
    line-height: 1.6em;
    text-align: center;
}


@media (min-width: 550px) {
#footer .text_desc {
    margin-bottom: 4em;
    font-size: 1.2em;
    line-height: 1.4em;
    text-align: left;
}}


#footer .text_desc_title {
    font-size: 0.8em;
    letter-spacing: .2em;
    line-height: 11.86px;
    font-weight: 600;
    margin-bottom: .8em;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
}


@media (min-width: 550px) {
#footer {
	margin-top:10%;
	margin-bottom:2%;
}	
#footer .text_desc_title {
    font-size: 0.7em;
    margin-bottom: .8em;
    text-transform: uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    text-align: left;
}}


.project_hr {
    display: none;
}


@media (min-width: 550px) {
.project_hr {
    display: block;
    border-top: 1px solid #000;
    }}

.project_metaz {
    text-align: center;
    padding-bottom: 2em;
    padding-top: 1em;
}


.archives li{
    margin-bottom: .1em;
    font-size: 1.2em;
    list-style: none;
}


@media (min-width: 550px) {
.archives li{
    margin-bottom: .2em;
}
.archives a:hover{
    border-bottom: 1px solid #000;
}}


.workz {
    margin-top: 3em;
}

@media (min-width: 550px) {
.workz {
    margin-top: 0em;
    }}


.workz img {
    margin-bottom: 1em;
}


img .colophon {
  clip-path: circle(100px at center);
}

.colophon_title{
    font-size: 1.45em;
    font-weight: 100;
}

hr {
    color: #000;
    border: 2;
    height: 2px;
}

#superfooter{
    margin-top: 4em;
    margin-bottom: 2em;
}

.about_title {
    text-align: center;
}


.home_title  {
    width: 90%;
    margin-top: 4em;
    margin-bottom: 0em;
}

@media (min-width: 550px) {
.home_title  {
    margin-top: 6em;
    margin-bottom: 0em;
}}

.home_title h3 {
    text-align: left;
    font-size: 2em;
    padding-bottom: -5em;
}

@media (min-width: 550px) {
.home_title h3 {
    text-align: left;
    font-size: 2.81em;
}}


.home_desc {
    width: 90%;
    margin-top: 0;
    padding-top: 0;
}


@media (min-width: 375px) {
.home_desc  {
    width: 80%;
    margin-top: 0;
    padding-top: 0;
}}

@media (min-width: 550px) {
.home_desc  {
    margin-top: 0;
    padding-top: 0;
}}

.home_desc h4 {
    text-align: left;
    font-size: 1.2em;
    padding: 0;
}

@media (min-width: 375px) {
.home_desc h4 {
    text-align: left;
    font-size: 1.6em;
    }}


@media (min-width: 550px) {
.home_desc h4 {
    text-align: left;
    font-size: 2.1em;
    }}