.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.pull--right{float:right}.pull--left{float:left}.hidden{display:none!important}.hidden--children>*{display:none}.text--left{text-align:left}.text--center{text-align:center}.text--right{text-align:right}.text--lowercase{text-transform:lowercase}.text--uppercase{text-transform:uppercase}.display--b{display:block}.display--i{display:inline}.display--i-b{display:inline-block;font-size:0}.display--i-b *{font-size:1rem}.position--abs{position:absolute}.position--rel{position:relative}.border-box,body.border-box *{box-sizing:border-box}.center{margin-right:auto;margin-left:auto}.center-h{left:50%;transform:translateX(-50%)}.position--a{position:absolute}.position--r{position:relative}.position--t-l,.position--top-left{top:0;left:0}.position--t-r,.position--top-right{top:0;right:0}.position--b-l,.position--bottom-left{bottom:0;left:0}.position--b-r,.position--bottom-right{bottom:0;right:0}.keywords{font-weight:400}.svg--composition.clear .chat{opacity:1;transition:all .05s linear}.svg--composition.clear .chat--css,.svg--composition.clear .chat--html,.svg--composition.clear .chat--js,.svg--composition.clear .chat--node,.svg--composition.clear .chat--npm,.svg--composition.clear .chat--terminal{transform:translate(1803px,1902px)}.svg--composition.clear .blopp--html{transform:translate(1580px,1961px)}.svg--composition.clear .blopp--css{transform:translate(1369px,2148px)}.svg--composition.clear .blopp--node{transform:translate(2149px,2159px)}.svg--composition.clear .blopp--js{transform:translate(1915px,1924px)}.svg--composition.clear .blopp--npm{transform:translate(2353px,1852px)}.svg--composition.clear .blopp--terminal{transform:translate(2669px,2200px)}.svg--composition.stage--1 .blopp--html{transform:translate(1580px,1211px);transition:transform 1.7s ease .3s;transition-timing-function:cubic-bezier(.57,.89,.83,1.22)}.svg--composition.stage--1 .blopp--html .eye--small{animation:a 7s infinite}.svg--composition.stage--1 .blopp--css{transform:translate(1369px,1398px);transition:transform 2s ease 0s;transition-timing-function:cubic-bezier(.57,.89,.83,1.22)}.svg--composition.stage--1 .blopp--css .eye--big{animation:b 17s infinite}.svg--composition.stage--1 .blopp--node{transform:translate(2149px,1409px);transition:transform 1s ease 1s;transition-timing-function:cubic-bezier(.57,.89,.83,1.22)}.svg--composition.stage--1 .blopp--node .eye--big{animation:b 13s infinite}.svg--composition.stage--1 .blopp--js{transform:translate(1915px,1074px);transition:transform 1.3s ease .7s;transition-timing-function:cubic-bezier(.57,.89,.83,1.22)}.svg--composition.stage--1 .blopp--npm{transform:translate(2353px,1102px);transition:transform .7s ease 1.3s;transition-timing-function:cubic-bezier(.57,.89,.83,1.22)}.svg--composition.stage--1 .blopp--npm .eye--big{animation:a 11s infinite}.svg--composition.stage--1 .blopp--terminal{transform:translate(2669px,1450px);transition:transform .5s ease 1.5s;transition-timing-function:cubic-bezier(.57,.89,.83,1.22)}.svg--composition.stage--1 .chat--html{transform:translate(1012px,715px);transition:transform 1.7s ease .3s}.svg--composition.stage--1 .chat--css{transform:translate(789px,1149px);transition:transform 2s ease 0s}.svg--composition.stage--1 .chat--node{transform:translate(2408px,635px);transition:transform 1s ease 1s}.svg--composition.stage--1 .chat--js{transform:translate(1622px,424px);transition:transform 1.3s ease .7s}.svg--composition.stage--1 .chat--npm{transform:translate(2701px,910px);transition:transform .7s ease 1.3s}.svg--composition.stage--1 .chat--terminal{transform:translate(2882px,1171px);transition:transform .5s ease 1.5s}.svg--composition.stage--1 .blopp:hover{cursor:pointer}.svg--composition.stage--1 .blopp--html:hover{transform:translate(1580px,1161px);transition-duration:.6s;transition-delay:0s}.svg--composition.stage--1 .blopp--css:hover{transform:translate(1369px,1348px);transition-duration:.6s;transition-delay:0s}.svg--composition.stage--1 .blopp--node:hover{transform:translate(2149px,1359px);transition-duration:.6s;transition-delay:0s}.svg--composition.stage--1 .blopp--js:hover{transform:translate(1915px,999px);transition-duration:.6s;transition-delay:0s}.svg--composition.stage--1 .blopp--npm:hover{transform:translate(2353px,1022px);transition-duration:.6s;transition-delay:0s}.svg--composition.stage--1 .blopp--terminal:hover{transform:translate(2669px,1400px);transition-duration:.6s;transition-delay:0s}.svg__wrapper{overflow:hidden}.svg__wrapper .svg--composition.stage--mail{width:100%;transition:all .1s ease}@keyframes a{0%{fill:#000}68%{fill:#000}70%{fill:#fff}72%{fill:#fff}75%{fill:#000}to{fill:#000}}@keyframes b{0%{fill:#fff}68%{fill:#fff}70%{fill:#000}72%{fill:#000}75%{fill:#fff}to{fill:#fff}}body{margin:0;background-color:#67c6ce}*{box-sizing:border-box}.view-port{position:relative;width:100vw;max-width:100%;height:100vh;max-height:100%}.view-port .head{padding:5px 0;height:20%}.view-port .body{position:absolute;top:0;left:0;width:100%;height:100%}.view-port--main{background-color:#fff}.view-port--fixed{z-index:1000;position:fixed;top:0;left:0}.view-port--contact_me{display:none;position:absolute;top:0;left:0;padding-bottom:15px;width:100%;height:100%;height:auto;max-height:auto}.view-port--contact_me.active{display:block}.view-port--contact_me.send--load .contact_me .field__wrapper{top:50%;left:50%;width:50px;height:50px;border-radius:50px;transform:translateX(-50%)}.view-port--contact_me.send--load .contact_me .field__wrapper--name{left:10%;transform:translate(-50%,100%);transition:all .5s ease,border-radius .2s ease .3s;animation:c 1s .25s ease infinite}.view-port--contact_me.send--load .contact_me .field__wrapper--email{left:calc(10% + 75px);transform:translate(-50%);transition:all .5s ease,border-radius .2s ease .3s;animation:d 1s .5s ease infinite}.view-port--contact_me.send--load .contact_me .field__wrapper--message{left:calc(10% + 150px);transform:translate(-50%,-100%);transition:all .5s ease,border-radius .2s ease .3s;animation:e 1s .75s ease infinite}.view-port--contact_me.send--load .contact_me .field__wrapper input,.view-port--contact_me.send--load .contact_me .field__wrapper label,.view-port--contact_me.send--load .contact_me .field__wrapper textarea{opacity:0;visibility:hidden;transition:all .2s ease}.view-port--contact_me.send--load .body .response{display:block;font-size:medium}.view-port--contact_me.send--load .body .button--submit{visibility:hidden}.view-port--contact_me.send--load .body .button--back{left:calc(100% - 100px);transition:all .4s ease}.view-port--contact_me.send--load .body .button--back:hover{left:calc(100% - 100px)}.view-port--contact_me.send--done .contact_me .field__wrapper{animation:none}.view-port--contact_me.send--done .contact_me .field__wrapper--email,.view-port--contact_me.send--done .contact_me .field__wrapper--message{opacity:0}.view-port--contact_me.send--done .contact_me .field__wrapper--name{left:50%;width:100%;height:auto;border-radius:7px;transform:translateX(-50%)}.view-port--contact_me.send--done .contact_me .field__wrapper--name .response{visibility:visible;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.contact_me{position:relative;top:0;left:50%;width:50vw;min-width:300px;transform:translateX(-50%)}.contact_me .head{height:auto}.contact_me .head svg{width:100%;height:auto}.contact_me .body{position:relative;margin:-50px auto 0;width:90%;height:auto}.contact_me .body .field__wrapper{position:relative;left:0;margin:.7em 0;padding:15px;width:100%;background-color:hsla(0,0%,100%,.5);border-radius:5px}.contact_me .body .field__wrapper label{color:#fff}.contact_me .body input,.contact_me .body textarea{padding:1.1em .3em .5em .7em;width:100%;border:none}.contact_me .body input:invalid,.contact_me .body textarea:invalid{border-right:3px solid #d32f2d;transition:border-right .3s ease}.contact_me .body input:valid,.contact_me .body textarea:valid{border-right:5px solid #90c53f;transition:border-right .5s ease}.contact_me .body textarea{min-height:3.8em;max-height:200px;resize:vertical}.contact_me .body .response{display:none;visibility:hidden}.contact_me .body .button{z-index:-1;position:absolute;border:none;background-color:transparent;cursor:pointer}.contact_me .body .button svg{width:100%;height:auto}.contact_me .body .button--submit{bottom:-130px;left:50%;margin:-75px 0 0;padding:.3em .5em;width:100%;max-width:300px;height:115px;background-color:#5e9fa5;border-radius:7px;transform:translateX(-50%);text-align:right}.contact_me .body .button--submit svg{width:60%}.contact_me .body .button--back{bottom:-75px;left:calc(50% - 180px);padding:.3em .5em;max-width:100px;max-height:2.5em;background-color:#c52f2d;border-radius:5px;transform:translateX(-50%);text-align:left;transition:left .2s ease}.contact_me .body .button--back svg{width:60%;height:2.2em}.contact_me .body .button--back:hover{left:calc(50% - 190px)}input[name=company]{display:none}.svg__wrapper{position:relative;height:100%}.svg__wrapper .svg--composition{position:absolute;top:50%;left:50%;width:90%;height:auto;height:100vh;max-height:100vh;transform:translate(-50%,-50%);transition:all 1s ease}.menu{z-index:1000;position:fixed;right:0;bottom:0;transition:all .2s ease}.menu .button{display:inline-block;vertical-align:middle;padding:5px;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.menu .button:active,.menu .button:focus{outline:2px solid #30aadd}.menu .button svg{width:100%;height:100%}.menu .button--message svg polygon{stroke:#212121}.menu .button__group{padding:0 1em 1em 0}@media screen and (max-height:330px){.contact_me .body .button--back{left:calc(70% - 210px)}.contact_me .body .button--back:hover{left:calc(70% - 225px)}}@media screen and (max-width:900px){.svg__wrapper .svg--composition{width:100%}}@media screen and (max-width:500px){.menu{right:50%;transform:translateX(50%);transition:all .2s ease}.menu .button__group{padding:0 0 1em}.contact_me .body .button--submit{width:60%;height:60px;bottom:-75px;left:70%}.contact_me .body .button--back{bottom:-50px;left:calc(70% - 100px)}.contact_me .body .button--back:hover{left:calc(70% - 115px)}}@keyframes c{20%{transform:translate(-50%,150%)}25%{transform:translate(-50%,100%)}50%{transform:translate(-50%,50%)}80%{transform:translate(-50%,100%)}}@keyframes d{20%{transform:translate(-50%,50%)}25%{transform:translate(-50%)}50%{transform:translate(-50%,-50%)}80%{transform:translate(-50%)}}@keyframes e{20%{transform:translate(-50%,-50%)}25%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-150%)}80%{transform:translate(-50%,-100%)}}