:root{--accent: #009b72;--lighter: $lighter;--show-y: 0%;--green: #009b72;--blue: #4d879e;--purple: #666699;--red: #ab4949}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%}body{font-family:Open Sans,sans-serif}.wrap{min-height:100%;background:#2a2d34}.wrap.lit{background:#2f323a}.align-cen{width:1280px;max-width:100%;margin:0 auto;display:flex}.site-header{position:fixed;top:0;left:0;z-index:50;width:100%;transition:background .25s ease;opacity:0;animation:fadeInTop .5s .5s ease forwards}.site-header .align-cen{padding:10px;justify-content:space-between}.site-header .logo{color:#fff;text-decoration:none;max-width:200px;display:flex;align-items:center}.site-header .logo .logo-image{max-width:100%;height:auto;width:25px;margin-right:5px}.site-header .site-nav{display:flex}.site-header .site-nav a{text-decoration:none;color:#fff;padding:5px 10px;margin:0 5px;text-transform:lowercase}.site-header .site-nav a.active{pointer-events:none;background:#00000026}.site-header.scroll{background:#2a2d34}.site-header.scroll .logo,.site-header.scroll .site-nav a{color:#fff}.showcase{max-width:100%;overflow:hidden;position:relative}.showcase .show{max-width:100%;position:relative;overflow:hidden}.showcase .show .show-image{position:absolute;top:0;left:0;width:100%;height:auto;z-index:5}.showcase .show .show-content{width:100%;position:relative;padding:20% 0;z-index:7}.showcase .show .show-inner{padding:10px;color:#fff;font-family:Space Mono,monospace;opacity:0;animation:fadeIn .5s .5s ease forwards}.showcase .show .show-inner span{background:var(--accent);display:inline-block;vertical-align:center;padding:0 5px}.showcase:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent,#2a2d34 var(--show-y));z-index:6}.showcase .align-cen.t-center{justify-content:center}@media(max-width:750px){.showcase .show-content{padding:30% 0!important}.showcase .show-content h1{font-size:1.9em}}.section{padding:5% 0}.section .section-title{font-size:2.4em;position:relative;margin-bottom:55px;opacity:0;animation:fadeInLeft .75s .75s ease forwards}.section .section-title:before,.section .section-title:after{transform-origin:0 0;transform:scaleX(0)}.section .section-title:before{content:"";width:150px;max-width:45%;border-bottom:1px solid #fff;position:absolute;left:0;bottom:0;animation:slideOut .5s .75s ease forwards}.section .section-title:after{content:"";width:50px;max-width:15%;border-bottom:1px solid var(--accent);position:absolute;left:0;bottom:-15%;animation:slideOut .5s 1s ease forwards}.section .section-pos-cen{display:flex;justify-content:center}.section .section-pos-cen .section-title:after{display:none}.section .section-pos-cen .section-title:before{max-width:100%;transform-origin:center}.section.dark{background:#2a2d34;color:#fff}.section.light{background:#2f323a;color:#fff}.section.dark-half{background:linear-gradient(to bottom,#2a2d34 25%,#2f323a 25%);background-size:100% 200%;color:#fff}.section.more-bg{background-size:100% 250%}.section .section-inner{padding:10px;width:100%}.section .section-content{font-family:Space Mono,monospace}.section .section-content p{margin:10px 0}.section .section-content.t-cen{text-align:center}.section .section-more{display:flex;padding:1rem 10px;align-items:center;justify-content:center}.section .section-more.t-more{margin-top:1rem}.section.space{padding-top:8rem}.section.no-b{padding-bottom:0}.section.no-t{padding-top:0}.card-list{width:100%;padding:15px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:20px}.card-list .card{position:relative;margin:10px 0;background:#2a2d34;box-shadow:0 0 5px 1px #0505054d;font-family:Space Mono,monospace;text-decoration:none;display:flex;flex-direction:column}.card-list .card .card--image{max-width:100%;overflow:hidden;max-height:150px;flex:1 1 auto}.card-list .card .card--image img{max-width:100%;height:auto;vertical-align:bottom}.card-list .card .card--title{padding:10px;font-size:1.1em;text-decoration:none;color:#fff;flex:1 0 auto}.card-list .card .card--subtitle{padding:0 10px 10px;font-size:.9em;color:#fff}.card-list .card:before{content:"";position:absolute;bottom:1%;left:10%;width:1px;height:5px;background:var(--accent);transform:scaleY(0);transition:transform .5s ease;transform-origin:top center;z-index:5}.card-list .card:after{padding:2.5px 5px;content:"View";position:absolute;top:109%;left:10%;background:var(--accent);color:#fff;opacity:0;transform:scaleX(0);transition:transform .5s ease,opacity .5s ease;text-align:left;z-index:5}.card-list .card:hover:before{transform:scaleY(10)}.card-list .card:hover:after{transition-delay:.2s;opacity:1;transform:translateZ(0)}.card-list.front .card{opacity:0}.card-list.front .card:nth-child(1){animation:fadeIn .5s ease forwards;animation-delay:1s}.card-list.front .card:nth-child(2){animation:fadeIn .5s ease forwards;animation-delay:1.5s}.card-list.front .card:nth-child(3){animation:fadeIn .5s ease forwards;animation-delay:2s}.card-list.front .card:nth-child(4){animation:fadeIn .5s ease forwards;animation-delay:2.5s}.card-list{margin-bottom:5rem}@media(max-width:640px){.card-list .card .card--image{max-height:300px}.card-list .card:before,.card-list .card:after{display:none}}.columns{display:flex}.columns.a-cen{align-items:center}.columns .col{width:100%;max-width:100%}.columns .col:first-child{padding-right:10px}.columns .col.col-two-third{width:calc(66.6666666% - 10px)}.columns .col.col-one-third{width:calc(33.3333333% - 10px)}@media(max-width:750px){.columns .col.img-con{order:1}}@media(max-width:750px){.columns .col.text-con{order:2}}.columns .col.text-con+.img-con{padding-left:50px}.columns .col.img-con+.text-con{padding-left:50px}.columns .col.a-cen .section-content{padding:3rem 0}.columns img{max-width:100%;height:auto}@media(max-width:750px){.columns{flex-direction:column}.columns .col{width:100%!important;padding:10px!important}.columns .col:first-child{padding-right:0}.columns .img-con{margin-bottom:10px}.columns .img-con img{padding:10px}}a.btn{cursor:pointer}button.btn{cursor:pointer;background:transparent;border:none}div.btn{cursor:default}.btn{--bg: #2f323a;color:#fff;text-decoration:none;padding:10px 25px;position:relative;box-shadow:0 0 0 1px inset #fff;transition:background .3s ease,color .3s ease}.btn:before,.btn:after{position:absolute;content:"";transition:transform .15s ease;left:0%;transform:scaleX(1);width:100%;height:1px;background:linear-gradient(to right,#fff 5%,var(--bg) 5%,var(--bg) 95%,#fff 95%);transform-origin:center center;transition-delay:.15s}.btn:before{top:0}.btn:after{bottom:0}.btn:hover{background:var(--accent);transition-delay:.3s}.btn:hover:before,.btn:hover:after{transform:scaleX(0);transition-delay:0s}.btn.default:hover{background:#57606f}.btn:active{background:#00b585!important;transition-delay:0s;transition-duration:.05s}.list-social{padding:3rem 0 1rem;display:flex;justify-content:center}.list-social .social{margin:5px;background:transparent!important;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px inset #666}.list-social .social svg{pointer-events:none;max-width:100%}.list-social .social:hover.codepen{color:#ff3c41}.list-social .social:hover.linkedin{color:#0077b5}.list-social .social:hover.instagram{color:#f77737}.list-social .social:hover.email{color:var(--accent)}.list-social .social:hover.github{color:#6cc644}.list-social.normie-pad{padding:1rem 0}.skills-list{display:flex;flex-direction:row;flex-wrap:wrap}.skills-list .skill{font-family:Space Mono,monospace;display:flex;flex-direction:row;margin:5px;padding:5px 15px;background:var(--color, transparent);border-radius:10px;color:var(--tcolor, #fff)}.skills-list .skill .skill--name{position:relative}.skills-list .skill .skill--line{width:10px;display:flex;align-items:center;margin:0 10px}.skills-list .skill .skill--line .line{width:100%;height:1px;background:var(--tcolor, #fff);position:relative}.form{max-width:100%;font-family:Space Mono,monospace}.form .form-group{display:flex;flex-direction:column;margin:10px 0}.form .form-group label{margin:0 0 5px}.form .form-group .form-input{background:#2a2d34;color:#fff;border:none;padding:10px 5px;font-size:1em}.form .form-group.button{display:flex;flex-direction:row;justify-content:flex-start;margin-top:15px}.form .form-group .btn{font-size:1.1em;max-width:150px;margin:10px}.form .form-group .btn.submit:hover{background:var(--green)}.validation{color:#fff;display:flex;align-items:center;justify-content:center;padding:10px;transform:scaleY(0);transition:transform .5s ease;margin:10px 0}.validation.good{transform:scaleY(1);background:var(--green)}.validation.bad{transform:scaleY(1);background:#ee5253}.tooltip{position:relative}.tooltip .tip{position:absolute;top:125%;left:50%;background:#0505054d;color:#fff;padding:5px 10px;transform:translateY(2.5px) translate(-50%);font-size:.8em;opacity:0;visibility:hidden;transition:transform .3s ease,opacity .3s ease}.tooltip .tip:after{content:"";width:0;height:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-bottom:7px solid rgba(5,5,5,.3);border-left:7px solid transparent;border-right:7px solid transparent}.tooltip:hover .tip{transform:translateY(0) translate(-50%);opacity:1;visibility:visible}.footer{background:#2f323a;color:#fff;padding:1rem 10px;text-align:center}.ani{--time: 1s;--delay: 1s;--ani: fadeIn;opacity:0;animation:var(--ani) var(--time) var(--delay) linear forwards}@keyframes slideOut{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes fadeIn{0%{opacity:0;transform:translate3d(0,25px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInLeft{0%{transform:translate3d(-10px,0,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes fadeInTop{0%{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:translateZ(0)}}