.menu-btn{z-index:3;cursor:pointer;transition:all .5s ease-out;position:absolute;top:35px;right:35px}.menu-btn .btn-line{background:#fff;width:28px;height:3px;margin:0 0 5px;transition:all .5s ease-out}.menu-btn.close{transform:rotate(180deg)}.menu-btn.close .btn-line:first-child{transform:rotate(45deg)translate(5px,5px)}.menu-btn.close .btn-line:nth-child(2){opacity:0}.menu-btn.close .btn-line:nth-child(3){transform:rotate(-45deg)translate(7px,-6px)}.menu{opacity:.97;visibility:hidden;background:#252c34;width:100%;position:fixed;top:0}.menu.show{visibility:visible}.menu-branding,.menu-nav{float:left;flex-flow:column wrap;justify-content:center;align-items:center;width:50%;height:100vh;display:flex;overflow:hidden}.menu-nav{background:#22262e;margin:0;padding:0;list-style:none;transition:all .5s ease-out;transform:translateY(-100%)}.menu-nav.show{transform:translate(0,0)}.menu-nav .nav-item{color:red;transition:all .5s ease-out;transform:translate(600px)}.menu-nav .nav-item.show{transform:translate(0,0)}.menu-nav .nav-item.current>a{color:#f66829}.menu-nav .nav-link{color:#fff;text-transform:uppercase;padding:1rem 0;font-size:30px;font-weight:300;text-decoration:none;transition:all .5s ease-out;display:inline-block;position:relative}.menu-nav .nav-link:hover{color:#f66829}.menu-branding{background:#353b49;transition:all .5s ease-out;transform:translateY(100%)}.menu-branding.show{transform:translate(0,0)}.menu-branding .portrait{background:url(/images/profile_pic.jpg) 50%/cover;border:3px solid #f66829;border-radius:50%;width:400px;height:400px}.menu .nav-item:first-child{transition-delay:.1s}.menu .nav-item:nth-child(2){transition-delay:.2s}.menu .nav-item:nth-child(3){transition-delay:.3s}@media screen and (width>=1171px){.container{width:80vw!important}.projects{grid-template-columns:repeat(4,1fr)!important}}@media screen and (width>=769px) and (width<=1170px){.container{width:80vw!important}#about .grid-container{grid-template-areas:"portrait""bio"!important}#about .skills{grid-template-columns:1fr!important}}@media screen and (width<=768px){main{align-items:center;text-align:center!important;margin-right:0!important}main .lg-heading{margin-bottom:1rem;line-height:1}.portrait{width:200px!important;height:200px!important}ul.menu-nav,div.menu-branding{float:none;width:100%;min-height:0}ul.menu-nav.show,div.menu-branding.show{transform:translate(0,0)}.menu-branding{height:30vh;transform:translate(100%)}ul.menu-nav{height:75vh;font-size:24px;transform:translate(-100%)}.projects{grid-template-columns:repeat(2,1fr)!important}#about .grid-container{grid-template-areas:"portrait""bio"!important;padding:0!important}#about .grid-container .img{width:200px!important;height:200px!important}#about .skills{text-align:left;grid-template-columns:1fr!important}#contact .contacts{flex-direction:column-reverse!important}#contact .contacts .icons{align-items:center;margin:20px 0;width:100%!important}#contact .contacts .icons div,#contact .contacts .btn,#contact .contacts main .btn-light,main #contact .contacts .btn-light,#contact .contacts main .btn-dark,main #contact .contacts .btn-dark{width:100%}form{text-align:left;padding:0 11%;width:100%!important}}@media screen and (width<=500px){.lg-heading{font-size:4rem!important}.projects{grid-template-columns:1fr!important}#contact .contacts form,#contact .contacts .icons{padding:0!important}}*{box-sizing:border-box}body#bg-img{background:url(/images/home.jpg) 0 0/cover fixed}body#bg-img:after{content:"";z-index:-1;background:#00000080;width:100%;height:100%;position:absolute;top:0;right:0}body{color:#fff;background:#353b49;height:100%;margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif;line-height:1.5}h1,h2,h3{margin:0;font-weight:400}h1.lg-heading,h2.lg-heading,h3.lg-heading{font-size:6rem}h1.sm-heading,h2.sm-heading,h3.sm-heading{margin-bottom:2rem}a{color:#fff;text-decoration:none}img{width:100%}header{z-index:2;width:100%;position:fixed}.text-secondary{color:#f66829}main .icons{margin-top:1rem}main .icons a{padding:.4rem}main .icons a:hover{color:#f66829;transition:all .5s ease-out}main .btn,main .btn-dark,main .btn-light{border:0;justify-content:flex-start;align-items:center;gap:.5rem;margin-bottom:.3rem;padding:.5rem 1rem;display:flex}main .btn:hover,main .btn-dark:hover,main .btn-light:hover{color:#fff;background:#f66829}main .btn-light{color:#000;background:gray}main .btn-dark{color:#fff;background:#000}main#home{text-align:right;margin-right:35px;overflow:hidden}main#home h1{margin-top:20vh}main#home h2{color:#4ae029}main#about{padding:0;overflow:hidden}main#about .grid-container{grid-template-areas:"portrait bio bio";align-items:center;gap:30px;padding:30px;display:grid}main#about .grid-container .portrait{grid-area:portrait;justify-self:center;width:350px;height:350px}main#about .grid-container .bio{grid-area:bio}main#about .grid-container .skills{grid-area:skills}main#about .grid-container .portrait .img{background:url(/images/profile_pic.jpg) 50%/cover;border:3px solid #f66829;border-radius:50%;width:350px;height:350px}main#about .skills{grid-template-columns:repeat(3,1fr);gap:22px 30px;margin-top:30px;margin-bottom:80px;padding:30px;display:grid}main#about .skills .skills-block{align-content:start;gap:18px;min-width:0;display:grid}main#about .skills .skills-header{align-items:flex-start;min-width:0;display:flex}main#about .skills .skills-header .big-tick-box{border:2px solid #fff;border-radius:10px;flex:0 0 45px;width:45px;height:45px;display:inline-block;position:relative;top:7px}main#about .skills .skills-header .big-tick-box .fa{color:#b6c71a;font-size:3.3rem;position:relative;top:-15px;left:3px}main#about .skills .skills-header h3{max-width:100%;margin-left:20px;font-size:1.1rem;font-weight:600;line-height:1.35;display:block}main#work{padding:0;overflow:hidden}main#work .sm-heading a:hover{color:#f66829;transition:all .5s ease-out}main#work .projects{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}main#work .projects .item{grid-template-rows:250px auto auto;gap:5px;display:grid}main#work .projects .item img{border:3px solid #fff;width:100%;height:100%}main#work .projects .item img:hover{opacity:.5;border-color:#f66829;transition:all .5s ease-out}main #footer{text-align:center;opacity:.8;background:#000;width:100%;height:60px;padding:1rem;font-size:22px;position:fixed;bottom:0}main#contact{padding:0;overflow:hidden}main#contact .contacts{flex-wrap:wrap;margin-top:40px;display:flex}main#contact .contacts .icons{text-align:right;flex-direction:column;gap:14px;width:50%;margin-top:0;padding:0 11%;display:flex}main#contact .contacts .icons div{justify-content:space-between;display:flex}main#contact .contacts .icons div:first-child{justify-content:end;gap:10px}main#contact .contacts .icons div:first-child a{background:#ffffff0a;border:1px solid #ffffff47;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;transition:all .25s;display:inline-flex}main#contact .contacts .icons div:first-child a i{font-size:1.1rem}main#contact .contacts .icons div:first-child a:hover{color:#f66829;background:#f668291f;border-color:#f66829;transform:translateY(-1px)}main#contact .contacts .icons div:not(:first-child){background:#ffffff0a;border-radius:8px;justify-content:flex-start;align-items:center;gap:10px;min-width:0;padding:8px 10px}main#contact .contacts .icons div:not(:first-child) span:first-child{flex:0 0 34px;justify-content:center;width:34px;display:inline-flex}main#contact .contacts .icons div:not(:first-child) span:last-child{overflow-wrap:anywhere;word-break:break-word;min-width:0}main#contact .contacts .btn,main#contact .contacts .btn-light,main#contact .contacts .btn-dark{cursor:pointer;float:right;background-color:#b6c71a;border-radius:5px;justify-content:center;margin-top:20px;padding:.5rem 2rem}main#contact .modal{visibility:hidden;z-index:1;background-color:#000000a6;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}main#contact .modal-content{color:#fff;text-align:center;background:#2b313d;border:2px solid #f66829;border-radius:10px;width:360px;margin:25% auto;padding:24px 20px 18px;position:relative;box-shadow:0 10px 25px #00000059}main#contact .modal-content .modal_img{width:30%;margin:28px auto 18px}main#contact .modal-content p{letter-spacing:.5px;font-size:24px}main#contact .close{color:#fff;text-align:center;background:#ffffff14;border:1px solid #ffffff38;border-radius:50%;width:32px;height:32px;padding:0;font-size:26px;font-weight:700;line-height:28px;position:absolute;top:10px;right:12px}main#contact .close:hover,main#contact .close:focus{color:#f66829;cursor:pointer;background:#f668291f;border-color:#f66829;text-decoration:none}main form{width:50%}main form label{padding:10px 0;display:block}main form label.error{padding:0}main form input,main form textarea{background-color:#fff;background-image:linear-gradient(#f66829,#f66829),linear-gradient(silver,silver);background-position:50% 100%,50% 100%;background-repeat:no-repeat;background-size:0 2px,100% 1px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:0;border-radius:5px;width:100%;padding:10px 5px;transition:background-size .3s cubic-bezier(.64,.09,.08,1);display:block}main form input.error,main form textarea.error{border:2px solid #c93c3c}main form input:focus,main form textarea:focus{background-size:100% 2px,100% 1px;outline:none}main .container{margin:5rem auto;padding-left:15px;padding-right:15px}main .green{color:#b6c71a}main .error{color:red;display:block}@media (width>=1100px) and (height>=820px){main#about{flex-direction:column;height:100dvh;display:flex;overflow:hidden}main#about .container{flex-direction:column;flex:1;min-height:0;margin-top:4.5rem;margin-bottom:2rem;display:flex}main#about h1.lg-heading{margin-bottom:.35rem;font-size:clamp(3rem,4.2vw,5rem)}main#about h2.sm-heading{margin-bottom:1rem}main#about .grid-container{flex:none;gap:18px;padding:18px 10px}main#about .grid-container .portrait,main#about .grid-container .portrait .img{width:240px;height:240px}main#about .skills{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;min-height:0;margin-top:10px;margin-bottom:0;padding:12px 10px 10px;overflow:hidden}main#about .skills .skills-block{gap:10px;overflow:hidden}main#about .skills .skills-header .big-tick-box{flex:0 0 34px;width:34px;height:34px;top:4px}main#about .skills .skills-header .big-tick-box .fa{font-size:2.4rem;top:-10px;left:2px}main#about .skills .skills-header h3{margin-left:12px;font-size:.95rem;line-height:1.25}}