body , html { background:#efefef; width:100%; height:100%; font-size:10px; }

/* HIDE */
.hidden { display:none !important; }

/* TABLE MODEL */
.table { display: table; width: 100%; height: 100%; }
.table .row { display: table-row; width: 100%; height: 100%; }
.table .row .cell { height: 100%; width: 100%; margin: 0 auto; display: table-cell; vertical-align: middle; }

/* RESPONSIVE EMBEDS */
.youtube-embed-container, .vimeo-embed-container {
  margin: 6.4rem 0;
  position: relative;
  padding-bottom: 53.65%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto; }
  .youtube-embed-container iframe, .youtube-embed-container object, .youtube-embed-container embed, .vimeo-embed-container iframe, .vimeo-embed-container object, .vimeo-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.vimeo-embed-container {
  padding-bottom: 54%; }

@media (min-width:640px) {
    .no-bottom { margin-bottom:0 !important; padding-bottom:0 !important; }
    .no-top { margin-top:0 !important; padding-top:0 !important; }
}

@font-face {
    font-family: a;
    src: url('font/a.eot');
    src: url('font/a.ttf')  format('truetype'),
         url('font/a.woff')  format('woff')
    ;
}

@font-face {
    font-family: cm;
    src: url('font/cm.eot');
    src: url('font/cm.otf')  format('opentype'),
         url('font/cm.woff')  format('woff')
    ;
}

body { font-family:"a"; line-height:1.6em; color:#7f8590; text-align:center; -webkit-font-smoothing:antialiased !important; }

h1, h2, h3 , h4, h5, h6 { margin:0; padding:0 0 0.25em 0; line-height:1.05em; }
h1, h2 , h4 { font-family:"cm"; color:#2c2f35; font-weight:normal; padding-bottom:0.75em; }

h1 { font-size:4.8rem; }
h2 { font-size:3.2rem; }
h4 { font-size:1.6rem; }

@media (min-width:480px) {
    h1 { font-size:7.2rem; }
    h2 { font-size:4.8rem; }
}

h3 { font-weight:200; font-size:1.3rem; text-transform:uppercase; letter-spacing:0.1em; line-height:1.6em; }

a { text-decoration:none; text-transform:uppercase; color:#7f8590; letter-spacing:0.1em; cursor:pointer; }

nav a , .login a { padding-bottom:1.6rem; border-bottom:1px solid rgba(191,197,208,0); -webkit-transition:0.35s; cursor:pointer; }
nav a:hover , .login a:hover { border-bottom:1px solid rgba(191,197,208,1); }

.accent { padding-top:1.6rem; display:inline-block; width:4.8rem; }
.accent span { display:block; border-bottom:1px solid #bfc5d0; width:0; transition:0.25s ease-in-out; }
a:hover .accent span { width:100%; }
p { line-height:2.6em; margin:0 0 1.2em 0; }
p span { white-space:nowrap; }
p a { color:#2c2f35; }
img , video { max-width:100%; padding:6.4rem 0; }

.copy { color:#2c2f35; }

.col { width:100%; display:block; }
.col img { width:100%; }
.third { width:33%; float:left; display:block; box-sizing:border-box; padding:2rem; }
.half { width:50%; float:left; display:block; box-sizing:border-box; padding:2rem; }

@media (max-width:640px) {
    .third , .half { width:100%; float:none; padding:0; }    
}

#wrapper { 
    padding:5% 10%;
    font-size:1.3rem;
    max-width:1920px;
    margin:0 auto;
    min-height:80%;
    position:relative;
}

header { 
    margin:0 auto; 
    width:100%;
    top:0;
    left:0;
    text-align: center;
    position:fixed;
    z-index:99;
}

footer { background:#000; color:#efefef; padding:1.6rem 3.2rem; font-size:1.3rem; letter-spacing:0.1em; text-transform:uppercase; }

.sig { width:100%; max-width:24rem; margin:6.4rem 0; }

.sh { 
    padding:0;
    width:10%;
    min-width:7.2rem;
    max-width:9.6rem;
    margin-top:4.8rem;
}

nav {
    position:absolute;
    top:7.2rem;
    padding:.8rem 1.6rem;
    z-index:999;
}

@media (min-width: 76rem) {
    nav { position:fixed !important; }
}

nav.left { left:6.7%; }
nav.right{ right:6.7%; }

/*
.nav-transform { 
    position:absolute; 
    display:block;
    top:50%;
} 

.nav-transform a { width:10rem; padding:1em; border:1px red solid; display:block; line-height:1em; border-bottom:1px solid #bbb; padding:0 0 3.2rem; }
#nav-about { left:3.2%; transform-origin:0 50%; transform:rotateZ(-90deg) translateX(-50%);  }
#nav-contact { right:3.2%; transform-origin:100% 0%; transform:rotateZ(90deg) translateX(-50%);  }
*/


.drawer { transition:0.5s ease-in-out; position:fixed; top:0; width:75rem; max-width:85%; height:100%; box-sizing:border-box; padding:10%; background:#FFF; z-index:9999; overflow:scroll; -webkit-overflow-scrolling:touch; }
.drawer a { padding-bottom:1.6rem; border-bottom:1px solid rgba(191,197,208,0); -webkit-transition:0.35s; }
.drawer a:hover { border-bottom:1px solid rgba(191,197,208,1); }
.drawer .table { transition:0.5s ease-in-out; -webkit-transform:translateY(5rem); opacity:0; }
.drawer.open .table { -webkit-transform:translateY(0); opacity:1; }

#about { -webkit-transform: translateX(-75rem); left:0; }
#contact { -webkit-transform: translateX(75rem); right:0; background:#FFF; }
#about.open { -webkit-transform: translateX(0) !important; }
#contact.open { -webkit-transform: translateX(0) !important; }
#tint { cursor:pointer; -webkit-transition:0.5s ease-in-out; visibility:hidden; opacity:0; position:fixed; top:0; left:0; z-index:9998; width:100%; height:100%; background:rgba(0,0,0,0.8); }
#tint.on { visibility:visible !important; opacity:1 !important; }

#splash { padding:18rem 0 9rem; }

#detail { padding:0 0 11rem; border-bottom:1px solid #c5c5d0; margin-bottom:11rem; }
#detail p { max-width:64rem; width:100%; margin:0 auto 1.6rem; text-align:left; }
#detail h2 { margin-top:2.4em; }

#detail img { padding:3.2rem 0; }
#detail .meta p { text-align:center; margin-bottom:3.6em; }

@media (min-width:760px) {
    #detail img , #detail video { padding:9.6rem 0; }
}

#work ul {
    list-style:none;
    padding:0 0 12rem 0;
    margin:0;
}

#work ul a {
    text-transform:none;
}

#work ul li img {
    transition:0.25s ease-in-out;
    -webkit-transform:translateY(0);
}

#work ul a:hover img {
    -webkit-transform:translateY(-0.5rem);
}

#work ul li {
    padding:0 0 5rem 0;
}

.login { padding-top:13em; }
.login a { color:#7f8590 !important; }
input { padding:1em; text-transform:uppercase; letter-spacing:0.05em; border:1px solid #DDD; -webkit-appearance:none; display:inline-block; margin:0; box-shadow:none !important; border-radius:0; }
.btn { border:#2c2f35; background:#2c2f35; color:#FFF; font-family:"cm"; font-weight:bold; -webkit-font-smoothing:antialiased;  }