html,body{margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#101018}canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important;overflow:hidden;opacity:1;z-index:1}h1,h2,h3,h4,h5,h6,span,p,a{font-family:"PT Sans";margin:0;padding:0;color:#fff}a{opacity:.6;text-decoration:none;-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-ms-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}a:hover{opacity:1}p{font-size:16px;line-height:28px}h1{font-family:"PT Serif";font-weight:400;font-size:40px;line-height:80px;letter-spacing:.5px}.footer .intro h1{font-size:26px;line-height:60px;letter-spacing:0}.outro span{font-family:"PT Sans";font-size:26px;line-height:60px;letter-spacing:0}h2{font-family:"PT Sans";font-weight:400;font-size:26px;line-height:40px;padding-bottom:10px}h4{font-family:"PT Sans";font-weight:400;font-size:16px;line-height:16px;opacity:.4;padding-bottom:40px}h6{font-size:13px}.copy h6{opacity:.4;font-weight:400}.logo h6{text-transform:uppercase;font-weight:700}.links span:not(:last-child){padding-right:30px}.links span i{padding-right:8px}.outro span{display:block}.outro span i{padding-right:20px}.logo{float:left}.links{float:right;padding-right:20%}.container{position:absolute;width:100%;height:100%;z-index:2}.nav{position:fixed;width:100%;font-size:13px}.nav.top{background-color:#10101800;padding-left:10%;top:15%;-webkit-transition:top .3s ease-in,background-color .3s ease-in-out;-moz-transition:top .3s ease-in,background-color .3s ease-in-out;-ms-transition:top .3s ease-in,background-color .3s ease-in-out;-o-transition:top .3s ease-in,background-color .3s ease-in-out;transition:top .3s ease-in,background-color .3s ease-in-out;z-index:9999;box-shadow:none;overflow:hidden}.nav.top.hidden{background-color:#101018FF;height:56px;top:0!important;-webkit-transition:top .3s ease-out,background-color .3s ease-in-out;-moz-transition:top .3s ease-out,background-color .3s ease-in-out;-ms-transition:top .3s ease-out,background-color .3s ease-in-out;-o-transition:top .3s ease-out,background-color .3s ease-in-out;transition:top .3s ease-out,background-color .3s ease-in-out;box-shadow:0 10px 60px #10101880;overflow:hidden}.nav.top.hidden .logo,.nav.top.hidden .links{padding-top:20px;padding-bottom:20px}.nav.bottom{left:10%;bottom:15%;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-ms-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.nav.bottom.hidden{bottom:10px!important;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-ms-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.content{width:100%;height:100%}.slide{width:100%;height:100%}.slide.atf{background-image:url(../img/mask-canvas.png);background-position:bottom right;background-size:cover;background-repeat:no-repeat;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;-webkit-box-align:center;align-items:center;-webkit-transition:opacity .2s ease-in-out;-moz-transition:opacity .2s ease-in-out;-ms-transition:opacity .2s ease-in-out;-o-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out}.intro{padding-left:10%}.intro-down{position:absolute;bottom:20px;opacity:.4;width:100%;height:10px;background:url(../img/icon-down.png);background-size:contain;background-repeat:no-repeat;background-position:center;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.intro-down.hidden{opacity:0;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.projects{display:flex;flex-direction:column;height:auto;width:100%;margin:0 auto;padding-top:60px}.project.wrapper{height:auto;background-color:#101018;padding-bottom:120px;opacity:1;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.offscreen{opacity:0!important}.project.info{width:250px;padding-left:10%;padding-bottom:60px;float:left;position:-webkit-sticky;position:sticky;top:120px}.project.collection{width:800px;padding-right:10%;float:right}.project.info span.year{display:inline-block;border:1px #fff solid;border-radius:2px;padding:4px 6px;font-size:13px;font-weight:700;line-height:13px;margin-bottom:40px}.project.collection span{opacity:.9;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.project.collection span:hover{opacity:1;-webkit-transition:opacity .3s ease-in-out;-moz-transition:opacity .3s ease-in-out;-ms-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.project.collection span.left{float:left;background-image:url(../img/placeholders/side.gif);background-color:#28282f;background-size:contain;background-position:center;background-repeat:no-repeat;overflow:hidden}.project.collection span.right{float:right;background-image:url(../img/placeholders/side.gif);background-color:#28282f;background-size:contain;background-position:center;background-repeat:no-repeat;overflow:hidden}.project.collection span.center{display:inline-block;background:url(../img/placeholders/center.gif);background-color:#33333a;background-size:contain;background-position:center;background-repeat:no-repeat;overflow:hidden}.project.collection span.left img,.project.collection span.right img{width:385px}.project.collection span.center img,.project.collection span.center video{width:800px}.project.collection span:not(:last-child){margin-bottom:30px}.slide.footer{background-image:url(../img/bg-footer.webp);background-image:-webkit-image-set(url(../img/bg-footer.jpg) 1x,url(../img/bg-footer.jpg) 2x);background-image:-css-image-set(url(../img/bg-footer.jpg) 1x,url(../img/bg-footer.jpg) 2x);background-position:bottom;background-size:cover;background-repeat:no-repeat;display:table;margin:0 auto;border-collapse:collapse;opacity:0}.slide.outro{display:table;margin:0 auto;border-collapse:collapse;opacity:0}.footer.wrapper,.outro.wrapper{display:table-cell;vertical-align:middle}.footer .intro{padding-top:40px;padding-left:10%;padding-bottom:6%;width:auto}.footer .skills.wrapper{padding-left:10%;width:auto}.footer .skills.content{float:left;width:200px;height:200px;margin-bottom:40px}.footer .skills.content:not(:last-child){margin-right:20px}ul{list-style-type:none}ul,li{cursor:default;margin:0;padding:0}ul:first-child > span{line-height:40px}ul span{font-weight:700;font-size:16px;line-height:16px}li span{font-weight:400;font-size:13px;line-height:25px;opacity:.6}li span:hover{opacity:1}img{opacity:0}.project.collection span,.project.collection span img{border-radius:2px}.project.collection span img{transform:skew(-5deg,0deg) translateX(30px);opacity:0;-webkit-transition:opacity .5s ease-in-out,transform .5s ease-in-out;-moz-transition:opacity .5s ease-in-out,transform .5s ease-in-out;-ms-transition:opacity .5s ease-in-out,transform .5s ease-in-out;-o-transition:opacity .5s ease-in-out,transform .5s ease-in-out;transition:opacity .5s ease-in-out,transform .5s ease-in-out}.project.collection span img.reveal{transform:skew(0deg,0deg) translateX(0px);opacity:1;-webkit-transition:opacity .5s ease-in-out,transform .5s ease-in-out;-moz-transition:opacity .5s ease-in-out,transform .5s ease-in-out;-ms-transition:opacity .5s ease-in-out,transform .5s ease-in-out;-o-transition:opacity .5s ease-in-out,transform .5s ease-in-out;transition:opacity .5s ease-in-out,transform .5s ease-in-out}@media only screen and (max-width: 1280px){.project.info{position:relative;top:0}}@media only screen and (max-width: 768px){.project.wrapper{display:none}.nomobile{display:none}h1{font-size:24px;line-height:42px}.footer .intro h1{font-size:18px;line-height:32px}}