@import url(https://fonts.googleapis.com/css?family=Montserrat:400,600,900|Overpass:200,400,900&display=swap);.loader-wrap{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:#fff;z-index:999999}.loader-div{display:block;width:50px;height:50px;margin:50vh auto auto;transform:translateY(-50%)}.loader-wrap h2{font-size:1.2em;text-align:center}.loader{height:100%;width:100%;border-radius:100%;background:#000}.loader:after{left:-10px;animation:rotate 8s linear infinite}.loader:after,.loader:before{content:"";display:block;position:absolute;height:30px;top:10px;width:30px;background-color:#fff;border-radius:30%}.loader:before{right:-10px;animation:rotate 8s linear infinite reverse}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.visible{opacity:1}.invisible,.visible{transition:opacity 2s}.invisible{opacity:0;display:none}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.container{margin:0 auto;padding:0 16px;max-width:1080px}.fullwidth{max-width:100%;padding:0}.row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center}.column{flex-basis:100%;padding-left:16px;padding-right:16px}@media (min-width:568px){._25{flex:5}}@media (min-width:768px){._25{flex:2.5}}@media (min-width:568px){._33{flex:3.3}}@media (min-width:568px){._40{flex:4}}@media (min-width:768px){._50{flex:5}}@media (min-width:768px){._60{flex:6}}@media (min-width:568px){._66{flex:6.6}}.separator{width:0;height:0;border-color:#181818 #e5e5e5 transparent transparent;border-style:solid;border-width:50px 100vw 0 0}@media (max-width:567px){.separator{border-width:50px 93vw 0 0}}body{background:#181818;min-height:100vh;overflow-x:hidden}img{width:100%;height:auto}footer .container{padding:16px 0}h1,h2,h3,h4{color:#e5e5e5;font-family:Montserrat,sans-serif}a,input,p,td,th{color:#e5e5e5;font-family:Overpass,sans-serif;font-weight:200;font-size:14px;line-height:20px}h1{font-style:normal;font-weight:900;font-size:6vw;line-height:10vw;color:#e5e5e5;opacity:.2;text-transform:uppercase}h2{font-size:32px;font-weight:400}h2,h3{margin-bottom:8px}h3{font-size:24px;margin-top:8px}hr{height:1px;border:none;border-bottom:1px solid #b3b3b3;margin:32px 0}.btn{display:inline-block;margin:8px 0;padding:8px 16px;background:#b3b3b3;color:#181818;border-radius:5px;font-weight:900;text-decoration:none;cursor:pointer}input,textarea{background:rgba(0,0,0,.3);padding:8px 32px;font-size:1em;font-weight:lighter;width:100%;color:#b3b3b3;border:none;border-radius:5px;display:block;margin-bottom:24px}.alert{background:#b3b3b3;font-size:1.3em;position:relative;top:80px;width:100%;max-width:800px;margin:0 auto;padding:8px;text-align:center}.grecaptcha-badge{visibility:hidden}.btn-main{width:fit-content;margin:0 0 0 auto;position:relative;height:32px}.btn-main a{line-height:32px;padding:5px 12px;vertical-align:middle;color:#4b9db7;font-weight:600;text-decoration:none}.btn-main a:before{border-left:4px solid #4b9db7;transition:height .3s cubic-bezier(.82,.1,.14,1.12) .3s}.btn-main a:after,.btn-main a:before{content:"";position:absolute;left:0;top:0;width:0;height:100%}.btn-main a:after{border-top:2px solid #4b9db7;border-bottom:2px solid #4b9db7;transition:width .3s cubic-bezier(.82,.1,.14,1.12)}.btn-main a:hover:before{height:0;width:100%;transition:height .3s cubic-bezier(.82,.1,.14,1.12)}.btn-main a:hover:after{width:100%;transition:width .3s cubic-bezier(.82,.1,.14,1.12) .3s}nav{position:fixed;right:0;top:0;background:#e5e5e5;width:0;max-width:100vw;height:100vh;z-index:10;transition:width .3s ease-in-out .3s}nav ul{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:0;height:0;max-height:400px;text-align:center;justify-content:space-between;opacity:0;transition:opacity .3s ease-in-out .3s,width 0ms .6s,height 0ms .6s}nav ul li{transform:translateY(-1000px)}nav ul li:first-child{transition:transform 1s ease 10ms}nav ul li:nth-child(2){transition:transform 1s ease 20ms}nav ul li:nth-child(3){transition:transform 1s ease 30ms}nav ul li:nth-child(4){transition:transform 1s ease 40ms}nav ul img{width:100px}nav ul li a{color:#181818;font-family:Montserrat,sans-serif;font-size:16px;text-decoration:none;font-weight:600;letter-spacing:3px}nav.menu-open{width:400px;box-shadow:-10px 0 30px #000}nav.menu-open ul{opacity:1;transition:opacity 1s ease-in-out .6s;width:200px;height:80vh}nav.menu-open ul li{transform:translateY(0)}.page-wrapper{display:flex;flex-direction:column;max-width:450px;margin:auto;padding:16px}@media (min-width:768px){.page-wrapper{max-width:none;padding:0;display:grid}}.logo-card{display:none;grid-area:logo;margin:0;padding:8px;background:#4b9db7;width:100%;max-width:150px;max-height:10vw;transition:transform .3s .6s}@media (min-width:768px){.logo-card{display:block}}.mymenu-icon{cursor:pointer}.mymenu-toggle{grid-area:mymenu;margin-left:auto;color:#4b9db7;font-size:2em;position:relative;transition:transform .3s .65s}@media (min-width:768px){.mymenu-toggle{align-self:end}}@media (min-width:992px){.mymenu-toggle{margin-left:0}}@media (min-width:768px){.home-wrapper{grid-template-columns:10% auto 10%;grid-template-rows:30vh auto auto;grid-template-areas:"logo  mymenu ." ".     maincontent ." ".     button ." ".     jesuis ."}}@media (min-width:992px){.home-wrapper{grid-template-columns:3fr 650px 4fr;grid-template-areas:"logo    .           mymenu" ".    maincontent    ." ".    jesuis         button"}}@media (min-width:992px){.home-wrapper .btn-main{margin:0 auto auto 0}}.home-wrapper .main-content{grid-area:maincontent;display:flex;order:2;flex-direction:column;flex-wrap:nowrap;margin:16px 0 16px auto}@media (min-width:768px){.home-wrapper .main-content{flex-direction:row}}.home-wrapper .main-content img{display:block;margin:0 auto 32px;width:250px;height:auto;opacity:1;transition:opacity .35s .5s}@media (min-width:768px){.home-wrapper .main-content img{margin:0 12px 0 0}}.home-wrapper .main-content-text{text-align:center;transition:transform .3s .7s}@media (min-width:768px){.home-wrapper .main-content-text{text-align:right}}.home-wrapper .main-content-text h2{margin-top:0;margin-bottom:16px}.home-wrapper .je-suis{grid-area:jesuis;order:1;min-height:50px;transition:transform .4s .7s}.home-wrapper .je-suis-title{margin-top:0;color:#4b9db7;font-size:20px;text-align:center}@media (min-width:768px){.home-wrapper .je-suis-title{font-size:32px;text-align:left}}.home-wrapper .contact-me{order:3;grid-area:button;transition:transform .3s .7s}.background-text-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around;z-index:-2}.background-text{font-size:8vw;opacity:.08;z-index:-2;text-align:center;font-weight:900;overflow:hidden;white-space:nowrap;margin-left:-100%;margin-right:-100%;transition:filter 2s}body.menu-open{height:100vh;overflow-y:hidden}body.menu-open .page-wrapper .logo-card{transform:translateY(-200px);transition:transform .5s}body.menu-open .page-wrapper .main-content img{opacity:0;transition:opacity 1s}body.menu-open .page-wrapper .main-content-text{transform:translateX(1500px);transition:transform .6s}body.menu-open .page-wrapper .je-suis{transform:translateX(-1500px);transition:transform .55s .1s}body.menu-open .page-wrapper .mymenu-toggle{transform:translateY(-500px);transition:transform .6s}body.menu-open .page-wrapper .contact-me{transform:translateY(500px);transition:transform .3s}body.menu-open .page-wrapper .background-text{filter:blur(6px);transition:filter 2s}@media (min-width:768px){.portofolio-wrapper{grid-template-columns:10% 1fr 1fr 10%;grid-template-rows:10vh 110px auto;grid-template-areas:"logo  maintitle   maintitle ." ".     .           mymenu    ." ".     maincontent infos     .";grid-gap:16px}}@media (hover:none) and (pointer:coarse) and (min-width:768px){.portofolio-wrapper{grid-template-areas:"logo  maintitle   maintitle ." ".     .           mymenu    ." ".     maincontent maincontent     ."}}@media (min-width:1200px){.portofolio-wrapper{grid-gap:24px;grid-template-rows:20vh 110px auto;grid-template-columns:10% 3fr 2fr 10%}}.portofolio-wrapper h1{width:100%;transition:width .5s;overflow-x:hidden}.portofolio-wrapper .mymenu-toggle{align-self:center}@media (min-width:768px){.portofolio-wrapper .mymenu-toggle{align-self:center}}.portofolio-wrapper .portofolio-element{background-size:cover;background-position:50%;background-color:rgba(24,24,24,0);background-blend-mode:multiply;position:relative;transition:.4s;transform-origin:left}.portofolio-wrapper .portofolio-element p{display:none}.portofolio-wrapper .portofolio-element div{position:absolute;left:0;top:0;background-color:rgba(0,0,0,.7);height:100%;width:0;transition:width .3s}.portofolio-wrapper .portofolio-element div div{background-color:rgba(14,48,91,.3)}.portofolio-wrapper .portofolio-element h2{z-index:2;position:absolute;font-size:16px;padding:0 8px;top:50%;transform:translateY(-50%);width:100%;text-align:center;line-height:32px;opacity:0;transition:opacity .1s}.portofolio-wrapper .portofolio-element:hover{transform:scale(1.1)!important;z-index:2;box-shadow:0 0 20px #000}.portofolio-wrapper .portofolio-element:hover>div{width:100%}.portofolio-wrapper .portofolio-element:hover>div div{width:100%;transition-delay:.2s}.portofolio-wrapper .portofolio-element:hover h2{opacity:1;transition:opacity .3s;transition-delay:.3s}@media (hover:none) and (pointer:coarse){.portofolio-wrapper .portofolio-element{background-color:rgba(1,1,1,.3)}.portofolio-wrapper .portofolio-element div{width:100%;background-color:transparent!important}.portofolio-wrapper .portofolio-element h2{opacity:1}}.portofolio-wrapper .page-title{grid-area:maintitle}.portofolio-wrapper .mymenu-toggle{align-self:auto}.portofolio-wrapper .main-content{grid-area:maincontent;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));display:grid}.portofolio-wrapper .main-content a{width:auto;height:170px}.portofolio-wrapper .project-infos{grid-area:infos}@media (hover:none) and (pointer:coarse){.portofolio-wrapper .project-infos{display:none}}.portofolio-wrapper .project-infos .wrapper{width:100%;position:-webkit-sticky;position:sticky;top:20vh}.portofolio-wrapper .project-infos h2{border-left:3px solid #4b9db7;padding:16px}.portofolio-wrapper .project-infos p{padding:16px;margin-left:3px}.portofolio-wrapper .project-infos .btn-main{margin-left:19px}.fixed{position:fixed;top:0;left:0}body.menu-open .portofolio-wrapper h1{width:0}body.menu-open .portofolio-wrapper .main-content,body.menu-open .portofolio-wrapper .project-infos{filter:blur(6px);transition:filter 2s}@media (min-width:768px){.project-wrapper{grid-template-columns:10% 1fr 10%;grid-template-rows:10vh auto;grid-template-areas:"logo . mymenu" "maincontent  maincontent   maincontent";grid-gap:16px}}.project-wrapper .mymenu-toggle{margin-left:0}.project-wrapper .project{grid-area:maincontent;transition:filter 1s;max-width:100%;margin-top:80px}@media (max-width:567px){.project-wrapper .project{padding:0}}.project-wrapper .project h1{text-align:left;font-size:32px;line-height:32px}.project-wrapper .project a.navigate{font-weight:400;text-decoration:none}.project-wrapper .project .column{max-width:100%}@media (max-width:567px){.project-wrapper .project .column{padding:0}}.project-wrapper .project .row>div:first-child{order:2}.project-wrapper .project .row>div:nth-child(2){order:1}@media (min-width:768px){.project-wrapper .project .row>div:nth-child(2){order:3}}.project-wrapper .project img{border-radius:5px}.project-wrapper .project .description{padding:48px;font-weight:400;border-radius:5px;background:#e5e5e5;box-shadow:-6px 6px 20px rgba(0,0,0,.6)}@media (min-width:768px){.project-wrapper .project .description{transform:translateX(-60px)}}.project-wrapper .project .description a,.project-wrapper .project .description h1,.project-wrapper .project .description h2,.project-wrapper .project .description p{color:#181818}.project-wrapper .project .description+img{transform:translateY(-30px);box-shadow:-6px -6px 25px rgba(0,0,0,.6);max-width:450px}.project-wrapper .project .project-navigator{display:flex;justify-content:space-between}.project-wrapper .project .project-carousel{display:flex}.project-wrapper .project .project-carousel .item,.project-wrapper .project .project-carousel .item img{width:350px;height:350px}.project-wrapper .project iframe{max-width:100%}body.menu-open .project-wrapper .project{filter:blur(6px)}@media (min-width:768px){.contact-wrapper{grid-template-columns:10% 1fr 10%;grid-template-rows:10vh auto;grid-template-areas:"logo . mymenu" "maincontent  maincontent   maincontent";grid-gap:16px}}.contact-wrapper .mymenu-toggle{margin-left:0}.contact-wrapper .contact{grid-area:maincontent;margin-top:48px;padding:80px 0}.contact-wrapper .contact .row .description{text-align:right}@media (min-width:768px){.profile-wrapper{grid-template-columns:10% 1fr 10%;grid-template-rows:10vh auto;grid-template-areas:"logo . mymenu" "maincontent  maincontent   maincontent";grid-gap:16px}}.profile-wrapper .mymenu-toggle{margin-left:0}.profile-wrapper .profil{grid-area:maincontent;margin-top:80px}.profile-wrapper .profil .row{overflow:hidden;max-width:100vw}.profile-wrapper .profil .row .skills .wrapper h4{text-align:center;margin-top:8px}.profile-wrapper .profil .row .skills .wrapper .skill-note{width:70%;height:16px;background:#b3b3b3;margin:0 auto;position:relative}.profile-wrapper .profil .row .skills .wrapper .skill-note div{position:absolute;top:0;left:0;height:100%;background:#8f201b}.profile-wrapper .profil .row .skills .wrapper p{text-align:right}.profile-wrapper .profil h1{text-align:center}.profile-wrapper .profil .wrapper{padding:64px 16px}@media (min-width:768px){.profile-wrapper .profil .wrapper{padding:64px 48px}}@media (min-width:992px){.profile-wrapper .profil .wrapper{padding:64px 96px}}.profile-wrapper .profil-web .skills{background-image:url(/build/images/profil-image1.13199cfc.jpeg);background-size:cover;background-color:#181818;background-blend-mode:soft-light}.profile-wrapper .profil-stage .skills{background-image:url(/build/images/profil-image2.b1b02406.jpeg);background-size:cover;background-color:#b3b3b3;background-blend-mode:soft-light}.profile-wrapper .profil-image .skills{background-image:url(/build/images/profil-image3.032dfb8a.jpeg);background-size:cover;background-color:#181818;background-blend-mode:soft-light}.profile-wrapper .profil-light{background:#e5e5e5}.profile-wrapper .profil-dark .skills h3,.profile-wrapper .profil-dark .skills h4,.profile-wrapper .profil-dark .skills p,.profile-wrapper .profil-light .description h2,.profile-wrapper .profil-light .description p{color:#1f1f1f}body.menu-open .profile-wrapper .profil{filter:blur(6px);transition:filter 2s}.home{padding-top:16px}@media (min-width:768px){.home{padding-top:160px}}.home .row{max-width:950px;margin:0 auto}.home .row h1{text-align:left}.avatar-home{margin-bottom:16px}@media (min-width:768px){.avatar-home{float:right}}#typed.intro-typed{color:#b3b3b3;font-family:Montserrat,sans-serif;font-size:24px}