style.css

html,div,ul,ol,li,h1,h2,h3,h4{margin:0;padding:0}img{border:0}ol,ul{list-style:none;padding:0;margin:0}h1,h2,h3,h4{font-size:100%;font-weight:bold}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}a{color:#000;text-decoration:none}.clear{clear:both;font-size:1px;line-height:0}body{margin:0;color:#000;background:#fff;font-family:"Trebuchet MS",Arial,sans-serif}html.inactive,html.inactive body{overflow:hidden}#site{width:100%;height:100%}#main{margin:0 auto}h1,h2,h3,#title{font-family:Futura,"Trebuchet MS",Arial,sans-serif}h1{color:#000;letter-spacing:-0.02em}h2{text-transform:uppercase;color:#04bd93;font-weight:bold}h3{color:#000;font-weight:bold}p a{text-decoration:underline}#title a{display:block;width:11em;line-height:1.1em;font-weight:bold;color:#000}.hero-unit{border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}.hero-unit span{margin-bottom:0;text-transform:uppercase;color:#04bd93;font-weight:bold}.hero-unit p{font-family:Futura,"Trebuchet MS",Arial,sans-serif;margin-top:0;max-width:32em;letter-spacing:-0.02em;font-weight:bold}#about-box{position:fixed;top:100%;bottom:0;right:0;left:0;transition:top 0s ease .4s;-webkit-transition:top 0s ease .4s;z-index:1001}#about-box .about-box-container{width:100%;height:100%;opacity:0;background:#04bd93;background:rgba(4,189,147,0.98);transition:opacity .4s ease;-webkit-transition:opacity .4s ease}#about-box.active{top:0;transition:top 0s ease 0s;-webkit-transition:top 0s ease 0s}#about-box.active .about-box-container{opacity:1;transition:opacity .6s ease-out;-webkit-transition:opacity .6s ease-out}#about-box-content{transition:margin-top .6s ease-out;-webkit-transition:margin-top .6s ease-out;position:relative;padding-bottom:1.2em}#about-box-content:before,#about-box-content::before{content:"";width:2.8em;display:block;height:.4em;background:#000;position:absolute;font-size:1.1em;bottom:0}#about-box-content p,#about-box-content p a{color:#fff}.close{position:relative;padding-top:.6em}.close:before,.close::before{content:"";width:2.8em;display:block;height:.4em;background:#000;position:absolute;font-size:1.1em;top:0}.close a{font-weight:bold;display:inline-block}.about-box-inner{height:100%;width:100%;overflow:auto}#contact{margin:8em auto 4em auto;position:relative;padding-top:2em}#contact:before,#contact::before{content:"";width:2.8em;display:block;height:.4em;background:#000;position:absolute;font-size:1em;top:0}#contact p{width:18.3em;letter-spacing:.01em}#contact h2{color:#000;margin-bottom:1em}#contact a.contact-email{margin-top:1.6em;display:block}#contact a.contact-email:before,#contact a.contact-email::before{content:"\2192 \0009"}#colophon{text-align:right}.title-container{position:absolute;top:0;right:0;bottom:0;left:0}.centering-table{display:table;width:100%;height:100%}.centering-table-inner{display:table-cell;width:100%;height:100%;vertical-align:middle;text-align:center}.project-list-item{display:block;position:relative;overflow:hidden;float:left;line-height:0;-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1)}.project-list-item-title{display:inline-block;margin:0 auto;background:#fff;background:rgba(255,255,255,0.95);padding:.6em;-webkit-box-shadow:0 0 2px rgba(0,0,0,0.1);box-shadow:0 0 2px rgba(0,0,0,0.1);max-width:16em}.project-list-item-title-inner{padding:1.6em;border:1px solid #525252;text-align:center;height:100%;width:100%;text-transform:uppercase;letter-spacing:-0.04em}.banner-img img{display:block;max-width:100%;margin:0 auto}#project-description{padding:.8em 0;border-bottom:1px solid #e2e2e2;border-top:1px solid #e2e2e2}#project-description h2{font-size:.9em;margin-bottom:0;margin-top:0}#project-description p{margin-top:0;max-width:31em}.what span{margin-right:.8em;font-size:.7em;display:inline-block;text-transform:uppercase;font-family:Times,"Times New Roman",serif}.ill-container img{-webkit-box-shadow:0 0 4px rgba(0,0,0,0.1);box-shadow:0 0 4px rgba(0,0,0,0.1);width:100%}.video-container{position:relative;padding-bottom:56.28%;height:0;overflow:hidden;-webkit-box-shadow:0 0 4px rgba(0,0,0,0.1);box-shadow:0 0 4px rgba(0,0,0,0.1)}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}h1,h2,h3,#title,#contact p,.hero-unit span{text-rendering:geometricPrecision}body{padding:2.4em;font-size:14px}#site{min-width:60.2em}#main{padding-top:10.6em;max-width:61em;padding-left:3.6em}h1{margin:1em 0;font-size:4.8em}h2{margin-bottom:0;margin-top:1em;font-size:1.2em}h3{font-size:1.2em;margin-top:.4em;margin-bottom:0}p{margin-bottom:.4em;margin-top:.4em;line-height:1.4em}a:hover{text-decoration:underline}.back{margin-bottom:-5.3em}.back a{padding:.5em 1em .5em 0;display:inline-block;font-size:1.1em}#header{margin:0;position:fixed;top:2.4em;left:2.4em;z-index:10000}#title{display:inline-block;margin-right:3em;margin-bottom:.4em;font-size:2em}#title a:hover{text-decoration:none}#title a:hover span{animation:blink 1.2s ease-in-out infinite;-moz-animation:blink 1.2s ease-in-out infinite;-webkit-animation:blink 1.2s ease-in-out infinite}@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-webkit-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}#menu{display:inline-block;margin-top:1.6em}#menu li{display:inline-block;margin-right:3em;margin-top:1em;position:relative;padding-top:2em}#menu li:before,#menu li::before{content:"";width:2.8em;display:block;height:.4em;background:#000;position:absolute;font-size:1em;top:0}#menu li a{padding:1.6em 1em 1em 0}.hero-unit{padding-top:7.2em;margin-top:2.1em;margin-right:-7.2em}.hero-unit span{font-size:.9em}.hero-unit p{font-size:1.9em;line-height:1.2em}.about-box-container{padding:.8em}.about-box-inner{border:.6em solid #fff}.active #about-box-content{margin-top:13.4em}#about-box-content{margin:12.1em auto 3.8em auto;width:33.2em;padding-left:.6em;padding-right:.6em}.close a{font-size:1.2em;padding:.6em 1.2em .6em 0;margin-bottom:3.8em}#contact p{font-size:13px}a.contact-email{font-size:1.4em}#footer{font-size:.9em;margin-bottom:-0.8em}#project-list{margin:6.4em -7.8em 0 -11.4em}.project-list-item{width:32.666%;margin:.333%;padding-top:19.5%}.project-list-item img{position:absolute;top:0;left:-21%;height:100%}.project-list-item h3{line-height:1.1em}.project-list-item:hover h3{color:#f1f1f1}.project-list-item:hover .project-list-item-title{background:#000;background:rgba(0,0,0,0.95);color:#f1f1f1}.project-list-item:hover .project-list-item-title-inner{border:1px solid #d1d1d1}.banner-img{width:92%;margin:0 auto}.banner-img .video-container{margin-bottom:2em}#project-description p{font-size:1.6em;font-family:Futura,"Trebuchet MS",Arial,sans-serif;margin-top:0;max-width:31em;letter-spacing:-0.02em}#project-illustrations{margin:4em -6.9em}#project-illustrations .ill-container{float:left;width:50%;padding:.4em .5em}#project-illustrations .ill-container.img2x{width:100%}@media screen and (max-width:74em){body{padding:2.1em 2.1em 1.2em 2.1em}#main{padding-left:0;width:56em}.hero-unit{margin-right:-6.4em;padding-top:4.8em}.hero-unit p{font-size:1.6em}#project-list{margin:4.8em -6.4em 0 -6.4em}#project-illustrations{margin:3.6em -6.1em}.project-list-item-title{font-size:.9em}}@media screen and (max-width:63.6em){body{padding:2.1em 0 1.2em 0}#header{left:1.9em;top:1.6em}#title{font-size:1.6em}.hero-unit{padding-top:3.6em;margin-top:5.6em;margin-right:0}#project-list{margin:3.6em -1.6em}.project-list-item{width:49%;margin:.5%;padding-top:25%}#project-illustrations{margin:2.8em -2.1em}.close a{margin-bottom:2.1em}#colophon{margin-right:2.1em}#contact{margin:6.4em 0}h1{font-size:2.9em}.back{margin-bottom:-3.6em;margin-top:1.4em}}