.timeline{margin:250px auto}.timeline .label{font-size:18px;text-transform:uppercase;opacity:.75}.timeline .label,.timeline .line{text-align:center;margin:10px auto}.timeline .line{display:grid;grid-template-columns:50% 50%;max-width:767px}.timeline .line .column{display:block;position:relative;width:100%;height:150px;-webkit-transition:all var(--time);transition:all var(--time);cursor:pointer;padding:20px}.timeline .line .column:active .key .extra,.timeline .line .column:hover .key .extra{opacity:1;-webkit-transform:scale(1);transform:scale(1);margin-top:150px;display:block}.timeline .line .column:active .img img,.timeline .line .column:hover .img img{-webkit-filter:grayscale(0);filter:grayscale(0)}.timeline .line .column .key{font-size:48px;position:absolute;width:calc(100% - 60px);text-align:center;-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out;padding:5px;margin-top:-80px}.timeline .line .column .key .close{display:none}.timeline .line .column .key .extra,.timeline .line .column .key .main{-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out}.timeline .line .column .key .extra{font-size:18px;text-transform:uppercase;min-height:20px;opacity:0;-webkit-transform:scale(.75);transform:scale(.75);-webkit-transform-origin:center bottom;transform-origin:center bottom}.timeline .line .column .img{position:absolute;display:inline-block;-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out;left:0;height:100px;width:100px}.timeline .line .column .img a{background-color:transparent;position:absolute;width:115px;height:130px;left:0;z-index:1;border-radius:10px;display:none}.timeline .line .column .img .name{display:none}.timeline .line .column .img .mask{width:100px;height:100px;border-radius:1000px;overflow:hidden;-webkit-transition:all var(--time);transition:all var(--time);border:solid 4px var(--transparency)}.timeline .line .column .img img{width:100%;-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out;-webkit-transform:scale(1.2);transform:scale(1.2);-webkit-filter:grayscale(100%);filter:grayscale(100%)}.timeline .line .column .img:first-child{margin-left:70px;margin-top:0;display:block}.timeline .line .column .img:nth-child(2){margin-left:110px;margin-top:0;display:block}.timeline .line .column .img:nth-child(3){margin-left:150px;margin-top:0;display:block}.timeline .line .column .img:nth-child(4){margin-left:190px;margin-top:0;display:block}.timeline .line .column .img:nth-child(5),.timeline .line .column .img:nth-child(6),.timeline .line .column .img:nth-child(7),.timeline .line .column .img:nth-child(8),.timeline .line .column .img:nth-child(9),.timeline .line .column .img:nth-child(10),.timeline .line .column .img:nth-child(11){display:none}.timeline .line .column:not(.active):active .img:first-child,.timeline .line .column:not(.active):hover .img:first-child{margin-left:33px}.timeline .line .column:not(.active):active .img:nth-child(2),.timeline .line .column:not(.active):hover .img:nth-child(2){margin-left:97px}.timeline .line .column:not(.active):active .img:nth-child(3),.timeline .line .column:not(.active):hover .img:nth-child(3){margin-left:161px}.timeline .line .column:not(.active):active .img:nth-child(4),.timeline .line .column:not(.active):hover .img:nth-child(4){margin-left:225px}.timeline .line .column:nth-child(odd){margin-top:75px}.timeline .line .column:nth-child(2n){margin-top:150px}.timeline .line .column:nth-child(2n):after{left:-1px;right:auto}.timeline .line .column.active{height:450px}.timeline .line .column.active .key{margin-top:-60px}.timeline .line .column.active .key .close{display:block;color:var(--color)}.timeline .line .column.active .key .extra{display:none}.timeline .line .column.active .key .main{display:none;color:var(--color)}.timeline .line .column.active .extra{display:none}.timeline .line .column.active .name{position:absolute;width:100%;text-align:center;margin:10px auto;display:block}.timeline .line .column.active .img:first-child{margin-left:19px;margin-top:0}.timeline .line .column.active .img:nth-child(2){margin-left:139px;margin-top:0}.timeline .line .column.active .img:nth-child(3){margin-left:259px;margin-top:0}.timeline .line .column.active .img:nth-child(4){margin-left:19px;margin-top:140px;display:block}.timeline .line .column.active .img:nth-child(5){margin-left:139px;margin-top:140px;display:block}.timeline .line .column.active .img:nth-child(6){margin-left:259px;margin-top:140px;display:block}.timeline .line .column.active .img:nth-child(7){margin-left:19px;margin-top:280px;display:block}.timeline .line .column.active .img:nth-child(8){margin-left:139px;margin-top:280px;display:block}.timeline .line .column.active .img:nth-child(9){margin-left:259px;margin-top:280px;display:block}.timeline .line .column.active .img:nth-child(10){margin-left:379px;margin-top:280px;display:block}.timeline .line .column.active .img:active .mask,.timeline .line .column.active .img:hover .mask{-webkit-transform:scale(1);transform:scale(1);border:solid 4px var(--color)}.timeline .line .column.active .img img{-webkit-filter:grayscale(0);filter:grayscale(0)}.timeline .line .column.active .img a{display:block}.timeline .line .column:after{content:"";width:1px;height:150%;right:0;top:0;background:var(--darker);position:absolute}@media screen and (max-width:767px){.timeline .line{grid-template-columns:100%}.timeline .line .column{margin-bottom:20px;height:200px}.timeline .line .column:nth-child(2n),.timeline .line .column:nth-child(odd){margin-top:20px}.timeline .line .column:first-child{margin-top:80px}.timeline .line .column .key .extra{display:block}.timeline .line .column.active.column{margin-left:-7px}.timeline .line .column.active.column .key .extra{display:none}}.social{position:fixed;right:20px;top:calc(50% - 100px);font-size:18px;font-weight:400;text-align:right;z-index:1;text-shadow:none}.social a{display:block;color:#000;margin-top:5px;padding:5px}.social a:active,.social a:hover{margin-right:5px}.profile{position:fixed;overflow:hidden;border-radius:100%;width:72px;height:72px;margin:20px}.profile>*{width:100%;height:auto}@media screen and (max-width:767px){.profile{width:24px;height:24px;margin:5px;top:15px}}.aboutme{overflow:hidden;width:100%;height:100%;position:fixed;top:0;left:0;-webkit-overflow-scrolling:touch}.aboutme .welcome-phrase{position:fixed;z-index:-1;top:13px;right:80px}.aboutme .welcome-phrase span{font-size:18px;padding:10px 15px;background:hsla(0,0%,100%,.95);border-radius:50px;display:block;font-weight:400;color:#333;border:1px solid #eee}.aboutme .row{margin:auto}.aboutme .hello{font-weight:300;padding-top:100px;padding-left:100px;margin-right:100px;padding-bottom:100px}.aboutme .hello h1{font-size:7vmax;-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out;-webkit-transform-origin:left center;transform-origin:left center}.aboutme .hello h1.effect{font-weight:700;background-color:#7b4397;text-transform:uppercase;color:var(--color);background:-webkit-gradient(linear,left top,left bottom,from(var(--color)),color-stop(#00bf8f),to(#7b4397));background:linear-gradient(-180deg,var(--color),#00bf8f,#7b4397);background-clip:text;fill-color:transparent;background:-webkit-linear-gradient(-180deg,var(--color),#00bf8f,#7b4397);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.aboutme .hello h6{text-transform:uppercase;color:#ccc}@media screen and (max-width:767px){.aboutme .hello{font-weight:300;padding-top:200px;padding-left:32px;margin-right:30px}.aboutme .hello h1{font-size:5vmax}}.aboutme .me{width:100%;height:100%;left:0}.aboutme .me,.aboutme .me .img{position:absolute;z-index:-1;top:0;overflow:hidden}.aboutme .me .img{display:block;width:300px;height:375px;left:calc(50% - 220px);border-radius:0}.aboutme .me .img,.aboutme .me .img img{-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out}.aboutme .me .img img{width:100%;-webkit-transform:scale(1.25);transform:scale(1.25);-webkit-perspective:400;perspective:400}.aboutme .me .img:first-child{-webkit-transform:translate(160%,30%);transform:translate(160%,30%)}.aboutme .me .img:nth-child(2){-webkit-transform:translate(120%,90%);transform:translate(120%,90%)}.aboutme .me .img:nth-child(3){-webkit-transform:translate(150%,155%);transform:translate(150%,155%)}@media screen and (max-width:767px){.aboutme .me .img{width:200px;height:240px;display:none;-webkit-transition:none;transition:none}.aboutme .me .img:first-child{-webkit-transform:translate(150%,40%);transform:translate(150%,40%)}.aboutme .me .img:nth-child(2){-webkit-transform:translate(118%,100%);transform:translate(118%,100%)}.aboutme .me .img:nth-child(3){-webkit-transform:translate(131%,185%);transform:translate(131%,185%)}}.aboutme .skill{margin:250px auto;-webkit-transition:all var(--time);transition:all var(--time)}.aboutme .skill .label{font-size:18px;margin-bottom:10px;text-transform:uppercase;opacity:.75}.aboutme .skill .more{position:absolute;left:0;width:100%}.aboutme .skill .key{font-size:48px;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out}.aboutme .skill p{font-size:24px;text-align:left}.aboutme .skill button{-webkit-transition:all var(--time) ease-in-out;transition:all var(--time) ease-in-out}@media screen and (max-width:767px){.aboutme .skill{margin:80px auto}.aboutme .skill .row{display:block;margin:10px 20px}.aboutme .skill .row .col{padding:20px 40px 20px 20px}}