@font-face{font-family:IdealSans;src:url(../fonts/ideal.woff) format('woff');font-style:normal;font-weight:200}@font-face{font-family:NeuzeitGro;src:url(../fonts/neuz.woff) format('woff');font-style:normal;font-weight:200}button,html,input,select,textarea{color:#222}html{line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,img,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browsehappy{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}body,html{height:100%;font-family:Lato,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px}body{overflow-x:hidden}body::-webkit-scrollbar{width:1em}body::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)}body::-webkit-scrollbar-thumb{background-color:#a9a9a9;outline:#708090 solid 1px}h1,h2,h3,h4{font-family:Lato,sans-serif}p{font-size:1.35em}h1{font-size:50px}.side-nav{position:fixed;top:0;right:0;width:600px;height:100%;overflow:hidden;text-align:center;z-index:100;background-color:#3e3c36;box-shadow:-5px 1px 10px #888}.side-nav h2{color:#fff}.side-nav ul.nav{margin-top:25px;font-family:Lato,sans-serif;font-size:2em;list-style:none}.side-nav ul.nav li{padding:5px 0}.side-nav ul.nav li a{color:#fff;text-shadow:2px 2px rgba(0,0,0,.8)}.side-nav ul.nav li a:hover{text-decoration:none;color:#e95a44}.side-nav ul.social{padding:0;margin-top:25px;font-family:Lato,sans-serif;font-size:1em;list-style:none}.side-nav ul.social li{display:inline;list-style-type:none;font-size:2em;padding:10px}.side-nav ul.social li a{padding:3px 20px;clear:both;font-weight:400;line-height:1.42857143;color:#fff;white-space:nowrap;text-shadow:2px 2px rgba(0,0,0,.8)}.side-nav ul.social li a:hover{text-decoration:none;color:#e95a44}.is-open-nav{z-index:400}.is-open-main{overflow:hidden;-webkit-transform:translateX(-600px);-ms-transform:translateX(-600px);-o-transform:translateX(-600px);transform:translateX(-600px)}.nav-btn{position:fixed;width:40px;height:40px;right:20px;top:20px;font-size:18px;line-height:40px;text-align:center;background:#cecece;border-radius:40px;z-index:500;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease}.nav-btn:hover{font-size:22px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease}.wrap{position:relative;width:100%;background:#eaeaea;-webkit-transition:-webkit-transform .4s ease .16s;-o-transition:transform .4s ease .16s,-o-transform .4s ease .16s;transition:transform .4s ease .16s;transition:transform .4s ease .16s,-webkit-transform .4s ease .16s,-o-transform .4s ease .16s;z-index:200}.wrap header{width:100%;position:relative;display:inline-block;background:#8e44ad;height:75px;color:#fff}.wrap header a{position:absolute;font-size:1.2em;color:#727267;padding:7px;letter-spacing:.1em;font-weight:700;text-decoration:none;text-align:left}.wrap header a h1{font-size:2.2em;margin:0;color:#fff}.wrap header a .ddc{font-size:.8em;color:#fff;text-align:center}.wrap .bg-1{background:#8e44ad;margin-top:-5px}.wrap .bg-1 .intro{display:flex;height:60vh;max-height:620px}.wrap .bg-1 .intro .intro-text{display:flex;width:100%;justify-content:center;flex-direction:column;text-align:center;color:#fff}.wrap .bg-1 .intro .intro-text h1{padding:20px}.wrap .bg-1 .intro .intro-text ul.intro-list{max-width:50%;margin:0 auto}.wrap .bg-1 .intro .intro-text ul.intro-list li{display:inline-block;padding:3px 5px;margin:5px 3px;background:#fff;color:#000;text-transform:uppercase;font-weight:700}.wrap .bg-4 ul#filters{margin:1%;padding:0;list-style:none}.wrap .bg-4 ul#filters li{float:left}.wrap .bg-4 ul#filters li span{display:block;padding:5px 20px;text-decoration:none;color:#666;cursor:pointer;font-size:2em}.wrap .bg-4 ul#filters li span.active,.wrap .bg-4 ul#filters li span.start{background:#8e44ad;color:#fff}.wrap .bg-4 ul#filters li span.start sup{color:rgba(255,255,255,.8)}.wrap .bg-4 ul#filters li#website span sup{color:#4d9db6}.wrap .bg-4 ul#filters li#exhibition span sup{color:#68b496}.wrap .bg-4 ul#filters li#other span sup{color:#eeb41d}.wrap .bg-4 ul#filters li#all span.active sup{color:rgba(255,255,255,.8)}.wrap .bg-4 #portfoliolist .portfolio{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;width:18%;margin:1%;display:none;float:left;overflow:hidden}.wrap .bg-4 #portfoliolist .portfolio .portfolio-wrapper{overflow:hidden;position:relative!important;background:#666;cursor:pointer}.wrap .bg-4 #portfoliolist .portfolio .portfolio-wrapper img{width:100%;max-width:100%;position:relative;top:0;-webkit-transition:all 600ms cubic-bezier(.645,.045,.355,1);transition:all 600ms cubic-bezier(.645,.045,.355,1)}.wrap .bg-4 #portfoliolist .portfolio .portfolio-wrapper .label{position:absolute;display:block;width:100%;height:80px;bottom:-80px;-webkit-transition:all 300ms cubic-bezier(.645,.045,.355,1);transition:all 300ms cubic-bezier(.645,.045,.355,1)}.wrap .bg-4 #portfoliolist .portfolio .portfolio-wrapper .label-bg{background:#2c3e50;width:100%;height:100%;position:absolute;top:0;left:0}.wrap .bg-4 #portfoliolist .portfolio .portfolio-wrapper .label-text{color:#fff;font-size:2.1em;position:relative;z-index:500;padding:15px 8px}.wrap .bg-4 #portfoliolist .portfolio .portfolio-wrapper .text-category{display:block;font-size:.6em;margin-top:12px;color:#ccc}.wrap .bg-4 #portfoliolist .portfolio:hover .label{bottom:0}.wrap .bg-4 #portfoliolist .portfolio:hover img{top:-30px}.wrap .bg-4 #portfoliolist .portfolio:after{content:'';position:absolute;border:20px solid transparent;border-right-color:#fff;top:-20px;left:-20px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.wrap .bg-4 #portfoliolist .website:after{border-right-color:#4d9db6}.wrap .bg-4 #portfoliolist .exhibition:after{border-right-color:#68b496}.wrap .bg-4 #portfoliolist .other:after{border-right-color:#eeb41d}.wrap footer{width:100%;background:#2c3e50;color:#ccc;margin-top:50px;padding-top:50px}.wrap footer p{font-size:1em;color:#ccc}.wrap footer p.info{margin-top:20px}.wrap footer p.copyright{text-align:center;font-size:.8em;margin-top:50px}.wrap footer ul.social{list-style:none}.wrap footer ul.social li{font-size:1em;padding:10px 0}.wrap footer ul.social li a{color:#fff}.wrap footer ul.social li a i{font-size:2em;margin:0 10px 0 0}.wrap footer ul.social li a:hover{color:#8e44ad}.wrap footer ul.footerNav{list-style:none}.wrap footer ul.footerNav li{font-size:1em;padding:10px 0}.wrap footer ul.footerNav li a{color:#fff;font-weight:700;font-size:1.2em}.wrap footer ul.footerNav li a:hover{color:#8e44ad}.wrap footer ul.footerNav li p{font-size:1em}@media screen and (min-width:1px) and (max-width:767px){.side-nav{width:75%}.is-open-main{overflow:hidden;-webkit-transform:translateX(-75%);-ms-transform:translateX(-75%);-o-transform:translateX(-75%);transform:translateX(-75%)}header a h1{font-size:1.5em}header .ddc{display:none}.bg-1 .intro{display:block}.bg-1 .intro .intro-left{display:flex;justify-content:center;flex-direction:column;background-color:rgba(5,5,5,.8)}.bg-1 .intro .intro-left h1{padding:20px}.bg-1 .intro .intro-right{background-color:rgba(255,255,255,.8);color:rgba(5,5,5,.8);padding:20px}.bg-2 .about{display:block;float:left}.bg-2 .about .about-left{display:flex;justify-content:center;flex-direction:column;background-color:rgba(5,5,5,.8)}.bg-2 .about .about-left h1{padding:20px}.bg-2 .about .about-right{background-color:rgba(255,255,255,.8);color:rgba(5,5,5,.8);padding:20px}.bg-2 .work{display:block;float:left}.bg-2 .work .work-left{background-color:rgba(255,255,255,.8);color:rgba(5,5,5,.8);padding:20px}.bg-2 .work .work-right{display:flex;justify-content:center;flex-direction:column;background-color:rgba(5,5,5,.8)}.bg-2 .work .work-right h1{padding:20px}.bg-2 .education{display:block;float:left}.bg-2 .education .education-left{display:flex;justify-content:center;flex-direction:column;background-color:rgba(5,5,5,.8)}.bg-2 .education .education-left h1{padding:20px}.bg-2 .education .education-right{background-color:rgba(255,255,255,.8);color:rgba(5,5,5,.8);padding:20px}}@media screen and (min-width:768px) and (max-width:1090px){.project-container>.project{width:50%}}@media screen and (min-width:1921px) and (max-width:4000px){#portfoliolist .portfolio{width:368px}}