@import url(https://fonts.googleapis.com/css?family=Catamaran:300,400,700&display=swap);*{box-sizing:border-box;margin:0;padding:0;font-family:Catamaran,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.test{height:1px;width:100%;border:1px solid red;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Portfolio{overflow:hidden;height:100vh;width:100vw;background-color:#252323}.Portfolio .header{height:20%;width:100%}.Portfolio .frame{display:flex;flex-wrap:wrap;height:100%;width:100%}.Portfolio .frame .navigation{position:fixed;bottom:0;height:50px;width:100%;background-color:#252323}.Portfolio .frame .navigation .overlay{z-index:1;position:fixed;top:0;left:0;height:100%;width:100%;background-color:rgba(37,35,35,.9)}.Portfolio .frame .navigation .container{z-index:2;position:fixed;top:calc(50% - 34px);left:50%;height:-moz-fit-content;height:fit-content;transform:translateX(-50%);transition:top .8s ease-in-out,opacity .8s}.Portfolio .frame .navigation .container .route{text-decoration:none}.Portfolio .frame .navigation .container .route .title{display:flex;margin:12px 0;height:44px;opacity:.3;transition:opacity .8s}.Portfolio .frame .navigation .container .route .title.active{opacity:1}.Portfolio .frame .navigation .container .route .title .number{display:flex}.Portfolio .frame .navigation .container .route .title .number .frame{margin:0 2px;height:100%;width:24px}.Portfolio .frame .navigation .container .route .title .number .frame .item{margin:0 auto;border:6px solid #f5f1ed;border-radius:12px;height:100%;width:100%;transition:border .8s ease-in-out,width .8s ease-in-out}.Portfolio .frame .navigation .container .route .title .number .frame .shapeshift{width:0;border:3px solid #ffca3a}.Portfolio .frame .navigation .container .route .title .text{padding-left:8px;width:65%;line-height:44px;text-align:left}.Portfolio .frame .navigation .button{z-index:1;position:absolute;bottom:-48px;left:50%;transform:translateX(-50%);height:48px;width:48px;transition:border-color .8s ease-in;animation:slideUp 1.2s ease-in forwards;animation-delay:1.2s}.Portfolio .frame .navigation .button .upper{position:absolute;left:50%;top:33%;transform:translate(-50%,-50%);border-radius:1px;height:2px;width:36px;transition:background-color .8s ease-in}.Portfolio .frame .navigation .button .upper.cross{animation:upperCross .8s ease-in forwards}.Portfolio .frame .navigation .button .upper.menu{animation:upperCrossReverse .8s ease-in forwards}.Portfolio .frame .navigation .button .lower{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);border-radius:1px;height:2px;width:36px;transition:background-color .8s ease-in}.Portfolio .frame .navigation .button .lower.cross{animation:lowerCross .8s ease-in forwards}.Portfolio .frame .navigation .button .lower.menu{animation:lowerCrossReverse .8s ease-in forwards}.Portfolio .frame .navigation .social{z-index:1;position:absolute;bottom:0;right:0;height:48px;width:144px}.Portfolio .frame .navigation .social .link{display:inline-block;position:absolute;border-radius:16px;top:110%;transform:translate(-50%,-50%) scale(.1);height:32px;width:32px;background-color:#fff}.Portfolio .frame .navigation .social .link.first{left:20%;animation:slideUpAndScale 1.2s cubic-bezier(.17,.67,.83,.67) forwards;animation-delay:1.8s}.Portfolio .frame .navigation .social .link.second{left:50%;animation:slideUpAndScale 1.2s cubic-bezier(.17,.67,.83,.67) forwards;animation-delay:2.4s}.Portfolio .frame .navigation .social .link.third{left:80%;animation:slideUpAndScale 1.2s cubic-bezier(.17,.67,.83,.67) forwards;animation-delay:3s}.Portfolio .frame .items{display:flex;overflow:auto;position:relative;height:100%;width:100%}.Portfolio .footer{position:relative;height:20%;width:100%}.Portfolio .footer .social{display:flex;justify-content:space-evenly;position:absolute;right:0;top:50%;transform:translateY(-50%);width:15%}.Portfolio .footer .social .link{border-radius:16px;height:32px;width:32px;background-color:#fff}@media only screen and (min-device-width:768px){.Portfolio{overflow:hidden;height:100vh;width:100vw;background-color:#252323}.Portfolio .header{height:20%;width:100%}.Portfolio .content{display:flex;height:100%;width:100%}.Portfolio .content .navigation{overflow:hidden;position:relative;border-right:1px solid #383737;height:100%;width:338px}.Portfolio .content .navigation .chevrons{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:60px;text-align:center;color:red}.Portfolio .content .navigation .chevrons .top{height:48px;width:48px;cursor:pointer}.Portfolio .content .navigation .chevrons .top .polygon{transform:translateX(50%);height:100%;width:50%;-webkit-clip-path:polygon(0 100%,50% 0,100% 100%,50% 65%);clip-path:polygon(0 100%,50% 0,100% 100%,50% 65%);background-color:#f5f1ed;transition:transform .8s ease-out}.Portfolio .content .navigation .chevrons .top .polygon:hover{transform:translate(50%,-15%)}.Portfolio .content .navigation .chevrons .middle{margin:12px 0;height:24px;width:48px;cursor:pointer}.Portfolio .content .navigation .chevrons .middle .polygon{transform:translateX(50%);height:100%;width:50%;-webkit-clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background-color:#f5f1ed;transition:transform .8s ease-out}.Portfolio .content .navigation .chevrons .middle .polygon:hover{transform:translateX(50%) scale(1.2)}.Portfolio .content .navigation .chevrons .bottom{height:48px;width:48px;cursor:pointer}.Portfolio .content .navigation .chevrons .bottom .polygon{transform:translateX(50%);height:100%;width:50%;-webkit-clip-path:polygon(0 0,50% 100%,100% 0,50% 35%);clip-path:polygon(0 0,50% 100%,100% 0,50% 35%);background-color:#f5f1ed;transition:transform .8s ease-out}.Portfolio .content .navigation .chevrons .bottom .polygon:hover{transform:translate(50%,15%)}.Portfolio .content .navigation .container{position:absolute;top:calc(50% - 34px);left:60px;height:-moz-fit-content;height:fit-content;transition:top .8s ease-in-out}.Portfolio .content .navigation .container .route{text-decoration:none}.Portfolio .content .navigation .container .route .title{display:flex;margin:12px 0;height:44px;opacity:.3;transition:opacity .8s}.Portfolio .content .navigation .container .route .title.active{opacity:1}.Portfolio .content .navigation .container .route .title .number{display:flex}.Portfolio .content .navigation .container .route .title .number .frame{margin:0 2px;height:100%;width:24px}.Portfolio .content .navigation .container .route .title .number .frame .item{margin:0 auto;border:6px solid #f5f1ed;border-radius:12px;height:100%;width:100%;transition:border .8s ease-in-out,width .8s ease-in-out}.Portfolio .content .navigation .container .route .title .number .frame .shapeshift{width:0;border:3px solid #ffca3a}.Portfolio .content .navigation .container .route .title .text{padding-left:8px;width:65%;line-height:44px;text-align:left}.Portfolio .content .navigation .social{display:flex;justify-content:space-evenly;position:absolute;bottom:0;transform:translateY(-50%);width:100%}.Portfolio .content .navigation .social .link{border-radius:16px;height:32px;width:32px;background-color:#fff}.Portfolio .content .items{display:flex;overflow:hidden;position:relative;height:100%;width:calc(100% - 338px)}.Portfolio .footer{position:relative;height:20%;width:100%}.Portfolio .footer .social{display:flex;justify-content:space-evenly;position:absolute;right:0;top:50%;transform:translateY(-50%);width:15%}.Portfolio .footer .social .link{border-radius:16px;height:32px;width:32px;background-color:#fff}}.slide-fade-down-enter-active,.slide-fade-down-leave-active,.slide-fade-up-enter-active,.slide-fade-up-leave-active{transition:all .8s ease-in-out}.slide-fade-down-leave-to,.slide-fade-up-enter-from{transform:translateY(-100%);opacity:0}.slide-fade-down-enter-from,.slide-fade-up-leave-to{transform:translateY(100%);opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .8s}.fade-enter,.fade-leave-to{opacity:0}@keyframes slideUp{to{bottom:0}}@keyframes slideUpAndScale{0%{top:150%}50%{top:50%;transform:translate(-50%,-50%) scale(.1)}to{transform:translate(-50%,-50%) scale(1);top:50%}}@keyframes upperCross{25%{width:1px}50%{width:1px;top:50%;transform:translate(-50%,-50%)}75%{transform:translate(-50%,-50%) rotate(-45deg)}to{top:50%;width:36px;transform:translate(-50%,-50%) rotate(45deg)}}@keyframes lowerCross{25%{width:1px}50%{width:1px;top:50%;transform:translate(-50%,-50%)}75%{top:50%;transform:translate(-50%,-50%) rotate(45deg)}to{top:50%;width:36px;transform:translate(-50%,-50%) rotate(-45deg)}}@keyframes upperCrossReverse{0%{top:50%;transform:translate(-50%,-50%) rotate(45deg);width:36px}25%{top:50%;transform:translate(-50%,-50%) rotate(-45deg)}50%{top:50%;transform:translate(-50%,-50%) rotate(0deg);width:1px}75%{top:33%;width:1px}to{width:36px}}@keyframes lowerCrossReverse{0%{top:50%;transform:translate(-50%,-50%) rotate(-45deg);width:36px}25%{top:50%;transform:translate(-50%,-50%) rotate(45deg)}50%{top:50%;transform:translate(-50%,-50%) rotate(0deg);width:1px}75%{top:66%;width:1px}to{width:36px}}.Simple{position:absolute;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;height:100%;width:100%}.Simple .container{position:relative;height:350px;width:100%;opacity:0;animation:fadeIn 1.2s ease-in forwards}.Simple .container .logo{overflow:hidden;height:320px;width:320px;background-image:url(/img/bg1.4cd95798.png),url(/img/bg2.5a702e9e.png),url(/img/bg3.62555715.png);background-position:50% 50%;background-blend-mode:hard-light,difference,normal;background-size:contain;transition:background-position 4s linear}.Simple .container .logo,.Simple .container .logo:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.Simple .container .logo:after{box-sizing:border-box;content:"";border:240px solid #252323;border-radius:75%;height:150%;width:150%;animation:decreaseBorderRadius 1.2s ease-in forwards}.Simple .container .logo .anima{height:100%;width:100%;background-image:url(/img/LogoAnimaReworkMask-03-03.829e43ab.svg);background-size:cover;background-position:50%;background-repeat:no-repeat}.Simple .content{height:calc(100% - 350px);width:100%}.Simple .content .headings{position:relative;margin:0 auto;width:-moz-fit-content;width:fit-content;max-width:360px;text-align:right;opacity:1;animation:fadeIn 1.2s ease-in forwards;animation-delay:1.2s}.Simple .content .headings .class{position:relative;font-size:16px;font-weight:700;color:#383737;text-align:center;line-height:18px}.Simple .content .headings .class:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px;height:14px;width:105%;background-color:#252323;animation:collapseHeight 1.2s ease-in-out forwards;animation-delay:3s}.Simple .content .headings .title{position:relative;font-size:32px;font-weight:700;color:#383737;line-height:19px}.Simple .content .headings .title:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px;height:32px;width:105%;background-color:#252323;animation:collapseHeightAndGrowWidth 1.2s ease-in-out forwards;animation-delay:2.4s}.Simple .content .headings .firstName{position:relative;font-size:64px;font-weight:700;color:#c20114;line-height:50px}.Simple .content .headings .firstName:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px;height:56px;width:105%;background-color:#252323;animation:collapseHeight 1.2s ease-in-out forwards;animation-delay:1.2s}.Simple .content .headings .lastName{position:relative;font-size:32px;font-weight:700;color:#c20114;line-height:22px}.Simple .content .headings .lastName:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px;height:28px;width:105%;background-color:#252323;animation:collapseHeight 1.2s ease-in-out forwards;animation-delay:1.8s}.Simple .content .headings .location{position:relative;font-size:16px;font-weight:700;color:#383737;line-height:16px}.Simple .content .headings .location:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px;height:16px;width:105%;background-color:#252323;animation:collapseHeight 1.2s ease-in-out forwards;animation-delay:3.6s}@keyframes fadeIn{to{opacity:1}}@keyframes decreaseBorderRadius{to{border:0 solid #252323}}@keyframes collapseHeightAndGrowWidth{75%{height:0}to{height:4px;width:105%}}@keyframes collapseHeight{to{height:0}}.Mind{position:absolute;height:100%;width:100%}.Mind .container{position:relative;height:350px;width:100%}.Mind .container .logo2{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;height:320px;width:320px}.Mind .container .logo2 .brain{position:absolute;left:0;top:0;height:100%;width:100%;background-image:url(/img/MindMask3.84770ddb.svg);background-size:contain;background-position:50%;background-repeat:no-repeat}.Mind .container .logo2 .frame{overflow:hidden;height:99%;width:50%;background-color:#944bbb}.Mind .container .logo2 .frame .text{display:flex;width:100%}.Mind .container .logo2 .frame .text .half{animation:infiniteXScroll 25s linear infinite;line-height:120%}.Mind .container .logo2 .frame .text .half.reverse{animation:infiniteXScroll 25s linear infinite reverse}.Mind .container .logo2 .frame .text .half .word{margin:0 2px;letter-spacing:1px;font-size:28px;font-weight:700;color:#ffca3a}.Mind .content{padding-bottom:48px}.Mind .content .text{margin:0 auto;padding:0 16px;line-height:48px;font-size:24px;font-weight:300;color:#f5f1ed}@keyframes infiniteXScroll{to{transform:translateX(-100%)}}@media only screen and (max-width:767px){.Mind{overflow:auto;flex-wrap:wrap}.Mind .headings{width:100%}}