@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);html,body{margin:0;padding:0}body *{font-family:'Josefin Sans',sans-serif}#background{background:linear-gradient(#131414,#292d31);position:relative}.noselect,.scrollDown{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#Menus{position:fixed;top:17px;z-index:10;right:25px}#Menus p{text-align:center;color:#fff;font-size:20px;display:inline-block;margin:0 0 0 25px;position:relative;top:calc(-20px + -2vw);cursor:pointer;-webkit-transition:top 0.5s,color 0.3s,background-size 0.2s;transition:top 0.5s,color 0.3s,background-size 0.2s}#Menus p:hover{color:#46bbbb;cursor:pointer}#Menus p:before{content:"";position:absolute;width:100%;height:2px;bottom:0;left:0;background-color:#46bbbb;;visibility:hidden;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s}#Menus p:hover:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1)}#Menus .menuButton{display:none;position:fixed;right:20px;top:20px;cursor:pointer}#Menus .menuButton span{width:35px;height:3px;background-color:lightgray;opacity:.8;display:block;margin:6px 0;-webkit-transition:transform 0.4s,opacity 0.4s,background-color 0.4s;transition:transform 0.4s,opacity 0.4s,background-color 0.4s}#Menus.open .menuButton span:nth-of-type(1){opacity:1;-webkit-transform:rotate(-45deg) translate(-9px,6px);transform:rotate(-45deg) translate(-5px,6px)}#Menus.open .menuButton span:nth-of-type(2){opacity:0}#Menus.open .menuButton span:nth-of-type(3){opacity:1;-webkit-transform:rotate(45deg) translate(-8px,-8px);transform:rotate(45deg) translate(-6px,-8px)}#CS{position:fixed;left:-13vw;top:20px;font-size:35px;color:#fff;z-index:2;-webkit-transition:left 0.5s;transition:left 0.5s;margin:auto}.Section{min-height:100vh;max-width:100%;position:relative;overflow-x:hidden;display:flex;justify-content:center;flex-direction:column}.scrollDown{width:80px;position:absolute;margin:auto;left:0;right:0;bottom:2%;background-image:url(/wp-content/themes/chris_theme/img/arrow.svg);background-repeat:no-repeat;background-size:60%;background-position:center bottom;min-height:117px;opacity:0;animation:load1 0.5s linear;animation-delay:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;cursor:pointer;transition:transform 0.8s;transform-origin:50% 100%}.scrollDown p{text-align:center;color:#fff;font-size:30px}.scrollDown:hover{transform:scale(1.3)}#Top{position:fixed;height:100vh;width:100%;top:0;background-size:cover;background-position:center center;background-repeat:no-repeat}#Top .name{position:absolute;margin:auto;display:block;width:80%;left:0;right:0;top:0;bottom:0;text-align:center;display:flex;justify-content:center;flex-direction:column}#Top .name h2{font-size:35px;color:#46bbbb}#Top .name h1{font-size:120px;color:#fff;margin-top:13px}#Tophidden{pointer-events:none}.down-container{width:40px}.scroll-btn{display:block;position:absolute;left:0;right:0;text-align:center}.scroll-btn a{display:inline-block;line-height:18px;font-size:13px;font-weight:400;color:#7f8c8d;color:#fff;letter-spacing:2px}.scroll-btn .mouse{position:relative;display:block;width:35px;height:55px;margin:0 auto;margin-top:20px;box-sizing:border-box;border:3px solid #fff;border-radius:23px;cursor:pointer;opacity:.6;-webkit-transition:opacity 0.5s;transition:opacity 0.5s}.scroll-btn .mouse:hover{opacity:1}.scroll-btn .mouse span{position:absolute;display:block;top:29%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;border-radius:50%;-webkit-animation:ani-mouse 2.5s linear infinite;animation:ani-mouse 2.5s linear infinite}@keyframes ani-mouse{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%}}@keyframes circle1{to{stroke-dashoffset:0}}@keyframes fade1{to{opacity:1}}#about .info{width:100%;position:relative;display:flex;justify-content:center;align-items:center}#about .info .text{width:50%;max-width:900px;margin:0 80px}#about .info img{position:relative;display:block;width:19vw;height:19vw;object-fit:cover;left:0;right:0;border-radius:50%;margin:0 80px}#about .info h2{margin:0;text-align:left;font-size:50px;color:#fff;font-weight:400}#about .info p{font-size:20px;line-height:23px;color:#fff}#portfolioSkills .Mobile{display:none}#portfolioSkills .skills{height:80vh;position:relative;width:80%;left:0;right:0;margin:auto}#portfolioSkills .skills .img{height:123px;width:123px;font-size:25px;position:absolute;cursor:pointer;-webkit-transition:opacity 0.3s;transition:opacity 0.3s}#portfolioSkills .skills .img .shape{transform-origin:50% 50%;fill:#fff0;-webkit-transition:fill 0.3s,opacity 0.3s;transition:fill 0.3s. opacity 0.3s}#portfolioSkills .skills .img circle{stroke-dasharray:calc(3.14159265359 * 100%);stroke-dashoffset:calc(3.14159265359 * 100%)}#portfolioSkills .skills .img rect{stroke-dasharray:400%;stroke-dashoffset:400%}#portfolioSkills .skills .img polygon{stroke-dasharray:300%;stroke-dashoffset:300%}#portfolioSkills .skills .img text{dominant-baseline:middle}#portfolioSkills p{width:80%;margin:80px auto;text-align:center;font-size:30px;color:#fff}#portfolioSkills p .header{font-size:50px;display:block}#portfolioSkills[class*="code"] .img{opacity:.1}#portfolioSkills .img:hover .shape{fill:#cc4692;opacity:1}#portfolioSkills .img:hover{opacity:1}#portfolioSkills .codeBackground{width:100%;height:100%;position:absolute;bottom:0;left:0;object-fit:cover;opacity:0;-webkit-transition:opacity 0.8s;transition:opacity 0.8s}#portfolioSkills.codeHTML .codeBackground[data-code*="html"]{opacity:.5}#portfolioSkills.codeCSS .codeBackground[data-code*="css"]{opacity:.5}#portfolioSkills.codeJS .codeBackground[data-code*="js"]{opacity:.5}#portfolioSkills.codePython .codeBackground[data-code*="python"]{opacity:.5}#portfolioSkills.codePHP .codeBackground[data-code*="php"]{opacity:.5}#portfolioSkills.codeSQL .codeBackground[data-code*="sql"]{opacity:.5}#portfolioExamples{display:flex;justify-content:center;flex-direction:column}#portfolioExamples .examples{background-color:#fff;font-size:0;margin-bottom:15vw}#portfolioExamples .examples .job{width:calc((100vw - (100vw - 100%)) / 3);height:32vw;display:inline-block;background-color:#000;position:relative;overflow:hidden;cursor:pointer}#portfolioExamples .examples .job .img{width:100%;height:100%;margin:auto;position:absolute;background-size:cover;background-position:center center;background-repeat:no-repeat;transform-origin:center center;-webkit-transition:transform 0.8s;transition:transform 0.8s}#portfolioExamples .examples .job .text{position:absolute;margin:auto;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background-color:rgb(70 187 187 / .8);opacity:0;-webkit-transition:opacity 0.8s;transition:opacity 0.8s}#portfolioExamples .examples .job .text h1{color:#fff;font-size:40px}#portfolioExamples .examples .job:hover .text{opacity:1}#portfolioExamples .examples .job:hover .img{transform:scale(1.1)}#portfolioExamples p{width:80%;margin:150px auto;text-align:center;font-size:30px;color:#fff}#portfolioExamples p .header{font-size:50px;display:block}#contact{display:flex;justify-content:center;align-items:center}#contact .Form{width:80%;max-width:976px;position:relative;top:0;bottom:0;left:0;right:0;display:block}#contact .Form .Mobile{display:none}#contact .scrollDown{bottom:auto;top:2%;transform:rotate(180deg);transform-origin:50% 50%;overflow:visible}#contact .scrollDown:hover{transform:rotate(180deg) scale(1.3)}#contact .scrollDown p{width:164px;margin:auto;left:-50%;right:-50%;position:relative;transform:rotate(-180deg);transform-origin:50% 50%}#contact p,#contact a{width:80%;margin:15px auto;text-align:center;font-size:30px;color:#fff}#contact p .header{font-size:50px;display:block}#contact .left{width:50%;display:block;margin:auto}#contact input{width:100%;height:43px;margin:0 0 10px 0;padding:10px;font-size:20px;border-width:0;border-style:solid;box-sizing:border-box}#contact button{width:100%;height:43px;margin:0 0 10px 0;padding:10px;font-size:20px;border-width:0;border-style:solid;box-sizing:border-box;display:block;color:#fff;background:#cc4692;border-style:none;cursor:pointer;position:relative;-webkit-transition:color 0.5s,background-color 0.5s;transition:color 0.5s,background-color 0.5s}#contact button:hover{background-color:rgb(204 70 146 / .6)}#contact button:before{content:"Send Messade";position:absolute;width:100%;height:43px;line-height:55px;vertical-align:bottom;bottom:0;left:0;visibility:hidden;color:#fff0;text-decoration:underline;text-decoration-color:#fff;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transition:all 0.3s ease-in-out 0s,text-decoration-color 0.5s;transition:all 0.3s ease-in-out 0s,text-decoration-color 0.5s}#contact button:hover:before{visibility:visible;-webkit-transform:scaleX(1);transform:scaleX(1)}#contact textarea{width:100%;height:134px;resize:none;font-size:20px;margin:0 0 10px 0;padding:10px;border-width:0;border-style:solid;box-sizing:border-box}#contact .Form .sendIt{color:#fff;position:relative;font-size:40px}#contact .Form .sendIt:before{content:"...";position:absolute;left:0;top:0;opacity:.6}#contact .Form .sendIt:after{content:"...";position:absolute;left:0;top:0;opacity:.6;animation:sending;animation-duration:1s;animation-iteration-count:infinite;-webkit-transition:clip-path 0.3s;transition:clip-path 0.3s}@keyframes sending{from{clip-path:polygon(-330% 0%,0% 0%,0% 100%,-33% 100%)}to{clip-path:polygon(99% 0%,138% 0%,138% 100%,99% 100%)}}@media all and (max-width:700px){#Menus{display:none}#Top .name{text-align:center}#Top .name h1{font-size:18vw}#Top .name h2{font-size:11vw;margin-bottom:0}#Top .name p{font-size:7vw}#about .info h2{width:100%;margin:0 5px}#about .info p{font-size:4vw;column-count:1}#about .info .text{width:100%;margin:15px}#about .info img{display:none}#portfolioSkills .skills{display:none}#portfolioSkills .Mobile{display:block;text-align:center;height:auto}#portfolioSkills .skills .img{height:87px;width:87px;top:0px!important;margin-left:0px!important;position:relative}#portfolioSkills .skills .img text{font-size:15px}#portfolioSkills .text{font-size:6vw}#portfolioSkills .skills .img polygon{stroke-dasharray:310%;stroke-dashoffset:310%}#portfolioExamples .examples{margin-top:0}#portfolioExamples .examples .job{width:100%;height:90vw}#contact p{width:100%}#contact p .header{font-size:40px}#contact a{font-size:20px;width:100%;margin:0}#contact .Form{height:399px;width:100%}#contact .left{width:80%;margin:auto;display:block}#CS{display:none}#Menus{margin:auto;background-color:#fff;left:100%;width:100%;height:100%;display:flex;justify-content:center;flex-direction:column;-webkit-transition:left 0.8s;transition:left 0.8s;top:0}#Menus p{font-size:12vw;margin:15px 0;color:#000;display:block;width:100%}#Menus.open{left:0}#Menus .menuButton{display:block}#Menus.open .menuButton span{background-color:#000}}