*{padding:0;margin:0;font-family:Poppins,sans-serif;color:#444}html{background:#fff}.mt{color:#0084ff}@media (max-width:699px){html{font-size:12px}.navigation{position:fixed;left:0;right:0;top:0;z-index:99}footer{position:relative;text-align:center}footer ul,footer ul li{margin:0}footer ul li a{margin-right:0;color:#1f1f1f;font-size:1.5rem;letter-spacing:1.5px}footer ul li a span{font-size:inherit;color:#0084ff}.project-container{width:100%}.page-heading{text-align:center;font-size:2rem;padding:20px}.pro-header-container{box-sizing:border-box;position:relative;height:100vh;padding:3rem}.pro-header-container h1{font-size:5rem}.pro-header-container .pro-header{position:absolute;bottom:3rem}.technologies{margin:2rem 0}.technologies li{font-size:16px}.project-type{margin:2rem 0}.project-type li{font-size:16px}.pro-details{margin-top:0;padding:3rem;box-sizing:border-box}.pro-details h1{font-size:2rem;margin-bottom:2rem;letter-spacing:1px}.pro-images{position:relative;overflow:hidden}.pro-images img{width:100%}.pro-images .desktop-img{border-radius:12px;overflow:hidden;position:relative;width:150%;bottom:0;margin-top:50px;margin-bottom:50px}.pro-images .tab-img{margin-left:-80%;overflow:hidden;border-radius:10px;width:150%;z-index:2;bottom:0;margin-top:50px;margin-bottom:50px}.pro-images .mob-img{overflow:hidden;border-radius:18px;width:80%;z-index:3;bottom:0;margin-left:37%;right:0;margin-top:50px;margin-bottom:50px}.about-details{margin-top:0;padding:3rem;box-sizing:border-box}.about-details h1{font-size:2rem;margin-bottom:2rem;letter-spacing:1px}.about-details .skills li .skill-time{top:unset!important;line-height:normal!important;bottom:0;font-size:1rem}.about-details .skills li .skill-time a{color:#0084ff}.about-details .skills li .skill-time a:hover{color:#1f1f1f}.home-container .my-name h1{font-size:2rem;position:relative;display:inline-block}.home-container .my-name h1::after{content:"";bottom:8px;right:0;display:block;width:3px;height:3px;background:#0084ff;position:absolute}.home-container .my-name p{font-size:1rem}}@media (min-width:700px) and (max-width:999px){html{font-size:13px}.navigation{position:fixed;left:0;right:0;top:0;z-index:99}.page-heading{text-align:center;font-size:3rem;padding:20px}.pro-header-container .pro-header{position:absolute;bottom:3rem}}@media (min-width:1000px) and (max-width:1199px){html{font-size:14px}.about-details,.pro-details{padding-top:3rem}}@media (min-width:1200px) and (max-width:1599px){html{font-size:16px}.about-details,.pro-details{padding-top:0}}@media (min-width:1600px) and (max-width:1999px){html{font-size:18px}}@media (min-width:2000px) and (max-width:2399px){html{font-size:21px}}@media (min-width:2400px){html{font-size:24px}}a{color:#1f1f1f;text-decoration:none}a:hover{text-decoration:none;color:#444}p{font-size:1.5rem;color:#999;letter-spacing:1px;font-weight:300;line-height:1.5em;margin-bottom:2.5em}img{width:100%}#page-wrapper{padding-right:2rem;padding-left:2rem;max-width:100rem}@media (max-width:1599px) and (min-width:700px){#page-wrapper,.page-container{padding-right:7.5rem;padding-left:7.5rem;max-width:140rem}}@media (min-width:768px){.page-container{margin:0 auto;max-width:1024px}.page-container p{color:#999;letter-spacing:1px;font-weight:300;line-height:1.5em;margin-bottom:2.5em}}h1{font-size:6rem}h2{font-size:5rem}h3{font-size:4rem}h4{font-size:3rem}h5{font-size:2rem;color:#fff;font-weight:900;text-transform:uppercase}.fade-in{animation:fadein 3s}@keyframes fadein{from{opacity:0}to{opacity:1}}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}.loading_spinner-wrap{position:fixed;z-index:999;background:#1f1f1f;top:0;left:0;right:0;bottom:0}.loading_spinner{display:block;margin:-10px auto 0 -40px;fill:#1f1f1f;position:absolute;top:50%;left:50%}.loading_spinner circle{animation-name:upAndDown;animation-duration:2s;animation-timing-function:cubic-bezier(0.05,.2,.35,1);animation-iteration-count:infinite}.loading_spinner circle:nth-child(2){animation-delay:.18s}.loading_spinner circle:nth-child(3){animation-delay:.36s}@keyframes upAndDown{0%{opacity:0;transform:translateY(0)}25%,75%{opacity:1;transform:translateY(-10px)}100%{opacity:0;transform:translateY(0)}}.navigation{right:0;left:0;padding:20px;z-index:99}.navigation .logo{display:inline-block}.sidebar-container{height:100%;width:100%}#sidebar{position:fixed;top:0;right:0;width:50%;height:100%;z-index:20;overflow:hidden;pointer-events:none;color:#1f1f1f;background:#fff;transform:scale(1,0);transform-origin:0 0;transition:all cubic-bezier(0.77,0,.175,1) .5s;perspective:1000;backface-visibility:hidden;opacity:0}#sidebar ul{position:absolute;bottom:50px;left:20px;width:calc(100% - 40px);max-height:350px;pointer-events:auto;font-size:4em;text-transform:uppercase;line-height:1;margin-bottom:-8px}#sidebar ul li{position:relative;overflow:hidden;margin-left:-2px;margin-bottom:10px;opacity:0}#sidebar ul li a{font-size:.5em;font-weight:700;position:relative;display:inline-block;text-transform:lowercase;color:currentColor}#sidebar.open{opacity:1;height:100%;transform:scale(1,1);background:#1f1f1f}#sidebar.open .docker{display:none}#sidebar.open ul{position:absolute;bottom:50px;width:calc(100% - 40px);pointer-events:auto;margin-bottom:-8px}#sidebar.open ul li{opacity:1;display:flex}@media (max-width:767px){#sidebar{width:100%}}.docker{display:block}#threeLines{position:absolute;right:20px;top:25px;z-index:22;width:30px;height:30px;padding:0;cursor:pointer;transition:all 600ms ease}#threeLines #el{cursor:pointer;width:30px;padding:0;height:1px;background:#fff;box-shadow:0 0 0 transparent;border:0 transparent;text-indent:-999px;position:absolute;top:50%;left:0;margin-top:-1px;line-height:0;transition:all 300ms ease;border-radius:99px}#threeLines #el:active,#threeLines #el:focus{outline:0;border:0}#threeLines #el::after{display:block;content:"";position:absolute;left:0;height:1px;background:#fff;width:100%;transition:all 300ms ease;border-radius:99px;top:-10px}#threeLines #el::before{display:block;content:"";position:absolute;height:1px;background:#fff;width:100%;transition:all 300ms ease;border-radius:99px;bottom:-10px;left:auto;right:0}#threeLines.active{transform:rotate(360deg)}#threeLines.active #el{background:0 0}#threeLines.active #el:after{transform:rotate(-135deg) translate(-9px,-9px) scale(1.1,1.1);background:#1f1f1f}#threeLines.active #el:before{transform:rotate(135deg) translate(-5px,5px) scale(1.1,1.1);background:#1f1f1f}footer{position:fixed;bottom:0;width:100%;padding:20px 0;left:0;z-index:1;text-align:right}footer ul{margin-right:10px;display:block}footer ul li{display:inline-block}footer ul li a{margin-right:10px;display:block;padding:6px;border-radius:6px;letter-spacing:1px;color:#999}footer ul li a.fb{background:#3b5998}footer ul li a.tw{background:#1da1f2}footer ul li a.gm{background:#d14836}.home-container{height:100vh;text-align:center;position:relative;top:0}.home-container .my-name{position:relative;top:40%;display:inline-block}.home-container .my-name h1{font-size:2em;letter-spacing:.2em;font-weight:300;color:#1f1f1f;margin-bottom:15px;position:relative;display:inline-block}.home-container .my-name h1::after{content:"";bottom:10px;right:3px;display:block;width:3px;height:3px;background:#0084ff;position:absolute}.home-container .my-name h1 span{color:#0084ff}.home-container .my-name p{color:#999;letter-spacing:.3em;font-size:1em}.home-container .my-name p span{color:#0084ff;margin:0 10px}.project-container{margin:0 auto;width:768px}.project-container ul.project-list{padding:20px}.project-container ul li{overflow:hidden;margin-bottom:1rem;background-size:cover}.project-container ul li a{position:relative;padding:40px 0 40px 40px;color:#ccc;text-transform:uppercase;font-size:32px;font-weight:700;display:block;letter-spacing:2px;transition:all 1s ease-in;background:#2c2c2c}.project-container ul li a:hover{background:rgba(51,51,51,0);transition:all 1s ease-in}.project-container ul li a span{position:absolute;z-index:-1;color:#1f1f1f;left:0;font-size:10rem;font-weight:700;top:0}.page-heading{font-size:2rem;font-weight:700;margin-bottom:1rem}.pro-header-container{position:absolute;top:0;left:0;right:0;background-size:cover;background-position:center center;height:50vh;padding-top:3rem;padding-bottom:3rem}.pro-header-container .page-heading{margin-bottom:0}.pro-header-container .view-proj-btn{background:#fff;padding:2rem 3rem;color:#1f1f1f;display:inline-block}.pro-header-container .pro-header h1{text-shadow:rgba(175,29,29,.46) 7px 7px 10px;color:#fff}.technologies{margin:2rem 0}.technologies li{list-style:none;display:inline-block;background:#444;color:#fff;margin-right:5px;margin-bottom:10px;padding:1rem 2rem;text-transform:uppercase}.project-type{margin:2rem 0}.project-type li{list-style:none;display:inline-block;background:#444;color:#fff;margin-bottom:10px;margin-right:5px;padding:1rem 2rem;text-transform:uppercase}.pro-details{margin-top:60vh}.pro-details h1{font-size:2rem;margin-bottom:2rem;letter-spacing:1px;color:#fff}.pro-images img{width:100%}.pro-images .desktop-img{border-radius:12px;overflow:hidden;margin-top:50px;margin-bottom:50px}.pro-images .tab-img{border-radius:10px;overflow:hidden;width:75%;margin-top:50px;margin-bottom:50px}.pro-images .mob-img{border-radius:18px;overflow:hidden;width:50%;margin-top:50px;margin-bottom:50px}.about{width:100%;height:100vh;height:auto}.about .about-me{color:#1f1f1f}.about-details{margin-top:0}.about-details h1{font-size:2rem;margin-bottom:2rem;letter-spacing:1px}.about-details .my-img{filter:grayscale(100%);filter:blur(5px)}.about-details .my-img:hover{filter:blur(0px)}.about-details .work-exp-block .skills{padding:1rem 0;margin-bottom:4rem}.about-details .work-exp-block .skills li{list-style:none;position:relative;margin-bottom:20px;display:block}.about-details .work-exp-block .skills li .skill-time{position:absolute;right:0;top:0;padding:1rem 0;line-height:1.5rem}.about-details .work-exp-block .skills li div{display:block}.about-details .work-exp-block .skills li .skill-name{color:#444;font-size:1rem;font-weight:500;border-bottom:#ccc 1px solid;padding:1rem 0;letter-spacing:.5px}.about-details .work-exp-block .skills li .skill-name div{padding:10px 20px;border-radius:30px;border:1px solid #ccc;margin-bottom:15px;color:#999;display:inline-block}.about-details .work-exp-block .skills li .skill-type{color:#999;font-size:1rem;padding:1rem 0}.about-details .work-exp-block .skills li .skill-type div{display:inline-block;padding:0 10px;border-right:1px solid #999;color:#999}.about-details .work-exp-block .skills li .skill-type div:nth-child(1){padding-left:0}.about-details .work-exp-block .skills li .skill-type div:nth-last-child(1){border-right:0 solid #999}.smooth-sec{position:fixed;right:0;top:45%;background:red;display:block}.smooth-sec li{display:block;padding:1rem}.contact-form input{font-size:2rem;width:100%;border:0 solid #1f1f1f;border-bottom:.2rem solid #1f1f1f;padding:1.5rem 1rem 1.5rem 4rem;box-sizing:border-box}.contact-form input:focus{border-bottom:.2rem solid #0057ff}.contact-form div span{position:absolute;font-size:2rem;padding:1.5rem 1rem}.g12{display:flex}.g12 .g1x2{flex:1}nav.main-nav{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#1f1f1f;z-index:1;align-items:center;justify-content:center;text-align:center;opacity:0;display:none}nav.main-nav ul{display:none}nav.main-nav ul li{text-align:center;display:contents;display:block}nav.main-nav ul li a{text-transform:uppercase;cursor:pointer;display:block;font-weight:800;padding:1rem;font-size:2.5rem;color:#fff}nav.main-nav ul li a:hover{color:#fff}nav.main-nav ul li.nav-logo{display:none}nav.main-nav.active{opacity:1;display:flex}nav.main-nav.active ul{display:block}