@-webkit-keyframes mainBlock{0%{width:0%;left:0}50%{width:100%;left:0}100%{width:0;left:100%}}@keyframes mainBlock{0%{width:0%;left:0}50%{width:100%;left:0}100%{width:0;left:100%}}@-webkit-keyframes secBlock{0%{width:0%;left:0}50%{width:100%;left:0}100%{width:0;left:100%}}@keyframes secBlock{0%{width:0%;left:0}50%{width:100%;left:0}100%{width:0;left:100%}}@-webkit-keyframes mainFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes mainFadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes popIn{0%{width:0;height:0;background:#00a2ff;opacity:0}50%{width:1rem;height:1rem;background:#00a2ff;opacity:1;bottom:4.5rem}65%{width:.7rem;height:.7rem;bottom:0;width:15px}80%{width:1rem;height:1rem;bottom:2rem}100%{width:.7rem;height:.7rem;background:#00a2ff;bottom:.9rem}}@keyframes popIn{0%{width:0;height:0;background:#00a2ff;opacity:0}50%{width:1rem;height:1rem;background:#00a2ff;opacity:1;bottom:4.5rem}65%{width:.7rem;height:.7rem;bottom:0;width:15px}80%{width:1rem;height:1rem;bottom:2rem}100%{width:.7rem;height:.7rem;background:#00a2ff;bottom:.9rem}}@-webkit-keyframes secFadeIn{0%{opacity:0}100%{opacity:.9}}@keyframes secFadeIn{0%{opacity:0}100%{opacity:.9}}@-webkit-keyframes popOut{0%{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);opacity:0}50%{-webkit-transform:scale3d(1.5,1.5,1);transform:scale3d(1.5,1.5,1);opacity:.5}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:.9}}@keyframes popOut{0%{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);opacity:0}50%{-webkit-transform:scale3d(1.5,1.5,1);transform:scale3d(1.5,1.5,1);opacity:.5}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:.9}}*,::after,::before{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;font-family:Montserrat,sans-serif}@media screen and (min-width:768px){html{font-size:12px}}@media screen and (min-width:1366px){html{font-size:14px}}body{background-color:gold}a{text-decoration:none;display:inline-block}.header{height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__container{width:90%;max-width:940px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__box{position:relative}.header__box .title{width:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:5.4rem}.header__box .title .block{width:0%;height:inherit;position:absolute;background:#00a2ff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:mainBlock 2s cubic-bezier(.74,.06,.4,.92) forwards;animation:mainBlock 2s cubic-bezier(.74,.06,.4,.92) forwards}.header__box .title h1{color:#fff;font-size:3.6rem;opacity:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;position:relative;-webkit-animation:mainFadeIn 2s forwards;animation:mainFadeIn 2s forwards;-webkit-animation-delay:1.6s;animation-delay:1.6s}.header__box .title h1 span{width:0;height:0;position:absolute;border-radius:50%;background:#00a2ff;margin-left:.5rem;margin-top:-1rem;bottom:.5rem;right:-1.2rem;-webkit-animation:popIn .8s cubic-bezier(.74,.06,.4,.92) forwards;animation:popIn .8s cubic-bezier(.74,.06,.4,.92) forwards;-webkit-animation-delay:2s;animation-delay:2s}.header__box .role{width:100%;height:3rem;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-1rem}.header__box .role .block{width:0%;height:inherit;position:absolute;background:#e91e63;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:secBlock 2s cubic-bezier(.74,.06,.4,.92) forwards;animation:secBlock 2s cubic-bezier(.74,.06,.4,.92) forwards;-webkit-animation-delay:2s;animation-delay:2s}.header__box .role p{opacity:0;font-size:1.4rem;font-weight:500;color:#4e4e4e;text-transform:uppercase;letter-spacing:.5rem;margin:0 auto;-webkit-animation:secFadeIn 2s forwards;animation:secFadeIn 2s forwards;-webkit-animation-delay:3.2s;animation-delay:3.2s}.header__icon{margin:4rem 0;font-size:3.6rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width:1366px){.header__icon{margin:3.6rem 0}}.header__icon .github-icon{-webkit-animation:popOut .6s cubic-bezier(.74,.06,.4,.92) forwards;animation:popOut .6s cubic-bezier(.74,.06,.4,.92) forwards;-webkit-animation-delay:3.8s;animation-delay:3.8s;opacity:0;color:#4e4e4e;margin:0 2.4rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.header__icon .github-icon:hover{color:#00a2ff}.header__icon .codepen-icon{-webkit-animation:popOut .6s cubic-bezier(.74,.06,.4,.92) forwards;animation:popOut .6s cubic-bezier(.74,.06,.4,.92) forwards;-webkit-animation-delay:4.4s;animation-delay:4.4s;opacity:0;color:#4e4e4e;margin:0 2.4rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.header__icon .codepen-icon:hover{color:#00a2ff}.header__icon .linkedin-icon{-webkit-animation:popOut .6s cubic-bezier(.74,.06,.4,.92) forwards;animation:popOut .6s cubic-bezier(.74,.06,.4,.92) forwards;-webkit-animation-delay:5s;animation-delay:5s;opacity:0;color:#4e4e4e;margin:0 2.4rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.header__icon .linkedin-icon:hover{color:#00a2ff}.form__section{height:100vh;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex}.form__section .form__container{width:80%;max-width:900px;margin:2.4rem auto;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.form__section .form__container .arrow--back{font-size:1.2rem;font-weight:500;color:#fff}.form__section .form__container .heading--secondary{font-size:2.4rem;margin:4rem 0}.form__section .form__container .form__box .contact__form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.form__section .form__container .form__box .contact__form .contact-mail,.form__section .form__container .form__box .contact__form .contact-name,.form__section .form__container .form__box .contact__form .send-btn,.form__section .form__container .form__box .contact__form .textarea{margin-bottom:1rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.form__section .form__container .form__box .contact__form .contact-mail label,.form__section .form__container .form__box .contact__form .contact-name label,.form__section .form__container .form__box .contact__form .send-btn label,.form__section .form__container .form__box .contact__form .textarea label{font-size:1.2rem;font-weight:500;letter-spacing:.1rem;margin-bottom:.5rem}.form__section .form__container .form__box .contact__form .contact-mail input,.form__section .form__container .form__box .contact__form .contact-mail textarea,.form__section .form__container .form__box .contact__form .contact-name input,.form__section .form__container .form__box .contact__form .contact-name textarea,.form__section .form__container .form__box .contact__form .send-btn input,.form__section .form__container .form__box .contact__form .send-btn textarea,.form__section .form__container .form__box .contact__form .textarea input,.form__section .form__container .form__box .contact__form .textarea textarea{padding:1rem;border:1px solid #00a2ff}.form__section .form__container--inactive{display:none}.form__confirmation{height:100vh;margin:0 auto;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.form__confirmation h1{color:#fff;font-size:2.4rem;margin-bottom:1.2rem}@media screen and (min-width:1366px){.form__confirmation h1{font-size:3.6rem}}.form__confirmation p{color:#fff;font-size:1.4rem;margin-bottom:6rem}@media screen and (min-width:1366px){.form__confirmation p{font-size:1.8rem}}.form__confirmation .arrow--back:link,.form__confirmation .arrow--back:visited{color:#fff;font-size:1.4rem}.form__confirmation .arrow--back:hover{color:#00a2ff}.form__confirmation--active{display:-webkit-box;display:-ms-flexbox;display:flex}.contact-btn:link,.contact-btn:visited{padding:1rem 2rem;border-radius:2px;font-size:1.2rem;font-weight:500;letter-spacing:.1rem;text-transform:uppercase;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;font-size:1rem;opacity:0;border:1.4px solid #4e4e4e;color:#4e4e4e;-webkit-animation:secFadeIn 2s forwards;animation:secFadeIn 2s forwards;-webkit-animation-delay:5.2s;animation-delay:5.2s}.contact-btn:hover{border:1.4px solid #00a2ff;background-color:#00a2ff;color:#fff;-webkit-box-shadow:4px 11px 11px -6px rgba(78,78,78,.35);box-shadow:4px 11px 11px -6px rgba(78,78,78,.35)}.contact-btn:active{-webkit-box-shadow:4px 11px 11px -9px rgba(78,78,78,.35);box-shadow:4px 11px 11px -9px rgba(78,78,78,.35)}.send-btn{padding:1rem 2rem;border-radius:2px;font-size:1.2rem;font-weight:500;letter-spacing:.1rem;text-transform:uppercase;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;color:#fff;border:1.4px solid #00a2ff;background-color:#00a2ff;margin-top:.5rem}.send-btn:hover{-webkit-box-shadow:4px 11px 11px -6px rgba(78,78,78,.35);box-shadow:4px 11px 11px -6px rgba(78,78,78,.35);border:1.4px solid #00a2ff}.send-btn:active{-webkit-box-shadow:4px 11px 11px -9px rgba(78,78,78,.35);box-shadow:4px 11px 11px -9px rgba(78,78,78,.35);border:1.4px solid #00a2ff}