html{padding:0;margin:0}body{background:#fff;font-family:Kanit,sans-serif;font-size:18px;font-weight:300;line-height:1.5;color:#666;overflow-x:hidden;padding:20px;padding-top:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:first-child{margin-top:0}:last-child{margin-bottom:0}h1,h2,h3,h4,h5,h6{color:inherit;font-size:200%;font-weight:900}@media print{h1,h2,h3,h4,h5,h6{font-weight:700}}a{text-decoration:underline;color:inherit;outline:0}a:hover{text-decoration:underline}b,strong{font-weight:700}.nowrap{white-space:nowrap}@media screen{.print{display:none!important}}@media print{body{font-size:8pt}.screen{display:none!important}.print-cols{display:-ms-flexbox;display:flex;margin:0 -10px}.print-cols>div{width:50%;padding:0 10px}}section{border-top:20px solid #fff;margin:0}section:after{content:'';display:block;clear:both}@media screen{section{background:none center center/cover no-repeat #f3f3f3}nav~section{margin-right:60px}}section.page,section.project{text-shadow:0 2px 10px rgba(0,0,0,.1);min-height:440px;height:calc(100vh - 40px);position:relative;z-index:1}section.page{background-color:#111;background-image:url(../img/bg-side.png);color:#b8e986}section.page:after,section.page:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}section.page:before{background:inherit;background-color:transparent;background-image:url(../img/bg-front.png);display:none}section.page:after{background-color:inherit;opacity:.3;display:block}section.project{color:#fff}@media screen{section .text{width:calc(50% + 180px);max-width:calc(100% - 60px);padding:20px 40px 20px 20px;float:right}}@media screen and (max-width:600px){section .text{max-width:calc(100% - 30px);padding-right:15px}}@media screen{section .text p{width:700px;max-width:calc(100% - 30px)}}section.page .text a{text-decoration:none}section.page .text a:hover{text-decoration:underline}section.page .text,section.project .text{position:absolute;top:50%;right:0;z-index:1;-ms-transform:translateY(-50%);transform:translateY(-50%)}section.page .text{font-size:30px;font-weight:200}section.page .text:after{content:'';display:block;clear:both}section.page .text svg{margin:-20px 10px -10px 0;float:left}section.page .text path{fill:#fff}section.page .text path.color{fill:#b8e986}section.page .text h1{display:none}section.page .text p{width:500px;max-width:calc(100% - 30px);margin:25px 20px 0 10px;float:left}@media (max-width:500px){section.page .text svg{width:130px;height:100px}section.page .text p{font-size:25px}}body.bg-front section.page:before{display:block}nav .bottom,nav .top{color:#111;position:fixed;right:5px;z-index:2}nav .bottom a,nav .top a{font-size:30px;text-align:center;text-decoration:none;line-height:30px;display:block;width:40px;height:30px;padding:15px}nav .bottom a:hover,nav .top a:hover{color:#b8e986}nav .top{top:20px}nav .top .hamburger-alt{display:none}nav .bottom{bottom:20px}nav .icon-text{position:relative}nav .icon-text span{color:#fff;font-family:sans-serif;font-size:12px;font-weight:700;margin-top:5px;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}nav .menu{background:#fff;font-size:14px;color:#999;max-height:calc(100% - 40px);overflow-y:auto;position:fixed;bottom:20px;right:80px;width:260px;z-index:0}nav .menu a{background:none center center/cover no-repeat #eee;width:calc(50% - 10px);height:0;padding-top:35%;display:block;float:left;position:relative}nav .menu a:after{background:#111;content:'';opacity:0;display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;transition:opacity .3s ease}nav .menu a:hover:after{opacity:.2}nav .menu a:nth-child(2n){margin-left:20px}nav .menu a:nth-child(2)~a{margin-top:20px}nav .hamburger:hover .hamburger-inner,nav .hamburger:hover .hamburger-inner:after,nav .hamburger:hover .hamburger-inner:before{background-color:#b8e986}section{transform:translate3d(0,0,0);-ms-transform-origin:left center;transform-origin:left center;transition:transform .3s ease}body.menu-open section,body.menu-opening section{transform:translate3d(-280px,0,0)}nav .menu{display:none}body.menu-closing nav .menu,body.menu-open nav .menu,body.menu-opening nav .menu{display:block}@media (max-height:520px){nav .top .hamburger{display:none}nav .top .hamburger-alt{display:block}section{-ms-transform:none!important;transform:none!important}}@media (max-width:400px){nav .bottom,nav .top{display:none}section{margin-right:0!important;-ms-transform:none!important;transform:none!important}}section.page-404{color:#f60}section.page-404 .text h1{color:#f60;font-size:200px;line-height:140px;display:block;margin:0}@media (max-width:500px){section.page-404 .text h1{font-size:150px;line-height:100px}}section.page-text .text p{font-size:25px}@media (max-width:600px){section.page-text .text p{font-size:21px}}@media (max-width:450px){section.page-text .text p{font-size:17px}}section.page-cv{padding-bottom:60px}section.page-cv .text{position:relative}section.page-cv dd,section.page-cv dl,section.page-cv dt{display:block}section.page-cv dl{margin-left:-220px}section.page-cv dl:after{content:'';display:block;clear:both}section.page-cv dd,section.page-cv dt{box-sizing:border-box;margin:0;float:left}section.page-cv dd:not(:first-of-type),section.page-cv dt:not(:first-of-type){border-top:1px solid #ddd}@media screen{section.page-cv dd,section.page-cv dt{padding:15px 0}}@media print{section.page-cv dd,section.page-cv dt{padding:5px 0}}section.page-cv dd:first-of-type,section.page-cv dt:first-of-type{padding-top:0}section.page-cv dd:last-of-type,section.page-cv dt:last-of-type{padding-bottom:0}section.page-cv dt{font-style:italic;text-align:right;width:220px;padding-right:30px;box-sizing:border-box;clear:left}section.page-cv dd{width:calc(100% - 220px)}section.page-cv dd p{position:relative}section.page-cv dd p>.fa{color:#f93;font-size:25px;position:absolute;top:3px;left:-50px;opacity:.6}@media print{section.page-cv dl.icons dd,section.page-cv dl.icons dt,section.page-cv dl.skills dd,section.page-cv dl.skills dt{border-top:none;padding:0}section.page-cv dl.icons dt,section.page-cv dl.skills dt{text-align:left;width:20%}section.page-cv dl.icons dd,section.page-cv dl.skills dd{width:80%}}@media (max-width:1000px){section.page-cv dl{margin-left:0}section.page-cv dl:not(.icons):not(.skills) dd,section.page-cv dl:not(.icons):not(.skills) dt{width:100%;float:none}section.page-cv dl:not(.icons):not(.skills) dt{text-align:left}section.page-cv dl:not(.icons):not(.skills) dd{border-top:none!important;padding-top:0;padding-left:40px}}@media screen and (max-width:1000px){section.page-cv dl:not(.icons):not(.skills) dt,section.page-cv dl:not(.icons):not(.skills) dt:last-of-type{padding-bottom:10px}}@media (max-width:1000px){section.page-cv dl:not(.icons):not(.skills) dd p>.fa{left:-40px}}@media screen and (max-width:1000px){section.page-cv dl.icons dt{width:40px}section.page-cv dl.icons dd{width:calc(100% - 40px)}}section.page-cv pre{background-color:#fff;color:#999;font-size:15px;overflow:visible;display:block;padding:0 0 20px 0;margin:0}section.page-cv pre .text{padding-top:0;padding-bottom:0}@media (max-width:1130px){section.page-cv pre{font-size:1.33vw}}@media (max-width:600px){section.page-cv pre{font-size:1.6vw}}section.page-cv h2,section.page-cv h3,section.page-cv h4{color:#333;font-size:150%;margin:80px 0 20px 0;position:relative}@media print{section.page-cv h2,section.page-cv h3,section.page-cv h4{margin:40px 0 15px 0}}section.page-cv .img-cv{box-shadow:0 5px 20px rgba(0,0,0,.1);width:110px;position:absolute;top:10px;right:20px}