@import url(https://fonts.googleapis.com/css2?family=Karla&display=swap);@import url(https://fonts.googleapis.com/css2?family=Sarabun&display=swap);#mobileNav,#screenOverlay,body,header{background:#030e12}#message,footer{min-height:5rem}[aos=fade]{opacity:0;transition-property:opacity}[aos=fade].aos-animate{opacity:1}html{scroll-behavior:smooth}body{font-family:Karla;font-size:1.2rem;color:#fff}body .anchor,body button,body img{caret-color:transparent}body a{color:#007fd9;text-decoration:none}#overlayFive .close-overlay-five:hover,#overlayFive .close-overlay-four:hover,#overlayFive .close-overlay-one:hover,#overlayFive .close-overlay-six:hover,#overlayFive .close-overlay-three:hover,#overlayFive .close-overlay-two:hover,#overlayFour .close-overlay-five:hover,#overlayFour .close-overlay-four:hover,#overlayFour .close-overlay-one:hover,#overlayFour .close-overlay-six:hover,#overlayFour .close-overlay-three:hover,#overlayFour .close-overlay-two:hover,#overlayOne .close-overlay-five:hover,#overlayOne .close-overlay-four:hover,#overlayOne .close-overlay-one:hover,#overlayOne .close-overlay-six:hover,#overlayOne .close-overlay-three:hover,#overlayOne .close-overlay-two:hover,#overlaySix .close-overlay-five:hover,#overlaySix .close-overlay-four:hover,#overlaySix .close-overlay-one:hover,#overlaySix .close-overlay-six:hover,#overlaySix .close-overlay-three:hover,#overlaySix .close-overlay-two:hover,#overlayThree .close-overlay-five:hover,#overlayThree .close-overlay-four:hover,#overlayThree .close-overlay-one:hover,#overlayThree .close-overlay-six:hover,#overlayThree .close-overlay-three:hover,#overlayThree .close-overlay-two:hover,#overlayTwo .close-overlay-five:hover,#overlayTwo .close-overlay-four:hover,#overlayTwo .close-overlay-one:hover,#overlayTwo .close-overlay-six:hover,#overlayTwo .close-overlay-three:hover,#overlayTwo .close-overlay-two:hover,body a:active,body a:focus,body a:hover,header .nav-link:active,header .nav-link:focus,header .nav-link:hover,header a:active,header a:focus,header a:hover{color:#38acff}body .rounded-link{border:.1rem solid;border-radius:10rem;padding:.5rem 1rem;text-decoration:none}header{position:fixed;width:100%;top:0;left:0;z-index:300;height:5rem}.contact .contactContainer .contactInformation .socialIcons a:hover,footer a,header .nav-link,header a{color:#fff}footer{color:#fff;position:relative;width:100%;bottom:0;left:0;z-index:0;text-align:center;padding:2rem 0;margin-top:5.5rem}footer a i{font-size:1.75rem;padding:0 1rem}.bar1,.bar2,.bar3{width:3rem;height:.5rem;background-color:#fff;margin:.5rem 0;transition:.2s;-webkit-transition:.2s;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;border-radius:3rem}.company-logo,.section-header{margin-bottom:1rem}.hamburger.active .bar1{-webkit-transform:rotate(-45deg) translate(-.7rem,.7rem);transform:rotate(-45deg) translate(-.7rem,.7rem);margin-top:.5rem}.hamburger.active .bar2{opacity:0}.hamburger.active .bar3{-webkit-transform:rotate(45deg) translate(-.7rem,-.7rem);transform:rotate(45deg) translate(-.7rem,-.7rem)}.navbar-toggler:focus{outline:0;box-shadow:none}#siteLogo{max-height:5rem}#desktopNav{display:none}#mobileNav{position:fixed;width:100%;text-align:center;top:5rem;left:0}#mobileNav .nav-item:first-child{padding-top:1rem}#mobileNav a{width:13rem;border:.2rem solid;border-radius:30rem;margin:1rem auto;font-size:1.5rem}#mobileNav .social-line{margin:1rem 0}#mobileNav .social-line span a{border:none;margin:0 .75rem;font-size:2rem}.no-scroll{overflow:hidden}.navbar{padding-top:0}#screenOverlay{display:none;height:100%;width:100%;position:fixed;top:0;left:0;z-index:200}#screenOverlay.active{display:block}#aboutAnch,#contactAnch,#projectsAnch{position:relative;top:-5rem}#aboutSection,#clientsSection,#contactSection,#projectsSection,#toolkitSection,#welcomeSection{padding:5%}#welcomeSection{min-height:90vh;display:flex}#welcomeSection .welcome-text{width:90%}#welcomeSection .welcome-text h1{font-size:2rem}#welcomeSection .welcome-text .resume-btn{caret-color:transparent;display:block;margin:1rem 0;font-size:1.25rem;text-align:center}#welcomeSection .welcome-img{background:#007fd9;border-radius:30rem;max-width:15rem}h1,h2{color:#007fd9;font-weight:700}.header-subtxt{position:relative;top:-1rem;font-style:italic;font-size:1rem}#pageContent{position:relative;top:5rem}.left-content,.right-content{justify-content:center}.proj-row{justify-content:space-between}.proj-row .proj-five,.proj-row .proj-four,.proj-row .proj-one,.proj-row .proj-six,.proj-row .proj-three,.proj-row .proj-two{background-repeat:no-repeat;border-radius:1rem;min-height:22.5rem;overflow:hidden;margin:1rem auto;border:.2rem solid #fff;max-width:95%}.proj-row .proj-five .video-container,.proj-row .proj-four .video-container,.proj-row .proj-one .video-container,.proj-row .proj-six .video-container,.proj-row .proj-three .video-container,.proj-row .proj-two .video-container{height:100%;width:100%;position:relative}.proj-row .proj-five .video-container video,.proj-row .proj-four .video-container video,.proj-row .proj-one .video-container video,.proj-row .proj-six .video-container video,.proj-row .proj-three .video-container video,.proj-row .proj-two .video-container video{width:100%;height:100%;position:absolute;object-fit:cover;z-index:0}.contact .contactContainer .contactInformation .socialIcons,.proj-row .proj-five,.proj-row .proj-one{padding:0}.proj-row .proj-two{background-color:#bab6b3}.proj-row .proj-two .video-container video{object-fit:contain}.proj-row .proj-three{background-image:url("../images/png/portfolio-web-screen.png");background-position:center;background-color:#030e12;background-size:contain}.proj-row .proj-six{background-image:url("../images/png/euphyllia-life-web-screen.png");background-position:center;background-color:#0b0c10;background-size:cover}.proj-row .proj-four{background:#38acff;align-items:center;justify-content:center;text-transform:uppercase;text-align:center;caret-color:transparent;user-select:none}#projContainerFive,#projContainerFour,#projContainerOne,#projContainerSix,#projContainerThree,#projContainerTwo{opacity:0;margin:0 auto;position:absolute;width:100%;height:100%;left:0;cursor:pointer}#overlayFive,#overlayFour,#overlayOne,#overlaySix,#overlayThree,#overlayTwo{opacity:0;visibility:hidden;margin:0 auto;position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.8);left:0;text-align:center;padding:5%;-webkit-transition:opacity .3s;-moz-transition:opacity .3s;-ms-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}#overlayFive.active,#overlayFour.active,#overlayOne.active,#overlaySix.active,#overlayThree.active,#overlayTwo.active{opacity:1;visibility:visible}#overlayFive .details-container,#overlayFour .details-container,#overlayOne .details-container,#overlaySix .details-container,#overlayThree .details-container,#overlayTwo .details-container{position:absolute;left:0;right:0;bottom:0;top:0;height:fit-content;display:block;width:90%}#overlayFive .details-container h2,#overlayFour .details-container h2,#overlayOne .details-container h2,#overlaySix .details-container h2,#overlayThree .details-container h2,#overlayTwo .details-container h2{color:#fff;text-transform:uppercase;font-size:1.5rem}#overlayFive .details-container p,#overlayFour .details-container p,#overlayOne .details-container p,#overlaySix .details-container p,#overlayThree .details-container p,#overlayTwo .details-container p{font-size:.8rem;max-width:30rem;margin:0 auto}#overlayFive .details-container .toolkits-used .tool,#overlayFour .details-container .toolkits-used .tool,#overlayOne .details-container .toolkits-used .tool,#overlaySix .details-container .toolkits-used .tool,#overlayThree .details-container .toolkits-used .tool,#overlayTwo .details-container .toolkits-used .tool{background-color:#007fd9;padding:.5rem;border-radius:10rem;max-width:8rem;font-size:.8rem;text-align:center;display:block;margin:.5rem auto 0}#overlayFive .details-container .project-links,#overlayFour .details-container .project-links,#overlayOne .details-container .project-links,#overlaySix .details-container .project-links,#overlayThree .details-container .project-links,#overlayTwo .details-container .project-links{margin-top:.8rem;display:flex;justify-content:center}#overlayFive .details-container .project-links .project-btn,#overlayFour .details-container .project-links .project-btn,#overlayOne .details-container .project-links .project-btn,#overlaySix .details-container .project-links .project-btn,#overlayThree .details-container .project-links .project-btn,#overlayTwo .details-container .project-links .project-btn{background-color:#030e12;padding:.75rem 1rem;border-radius:30rem;font-size:.8rem;border:.1rem solid #fff;display:block;min-width:7rem;margin:0 .25rem}#overlayFive .details-container .project-links .project-btn:hover,#overlayFour .details-container .project-links .project-btn:hover,#overlayOne .details-container .project-links .project-btn:hover,#overlaySix .details-container .project-links .project-btn:hover,#overlayThree .details-container .project-links .project-btn:hover,#overlayTwo .details-container .project-links .project-btn:hover{background-color:#007fd9;border-color:#007fd9;color:#fff}#overlayFive .close-overlay-five,#overlayFive .close-overlay-four,#overlayFive .close-overlay-one,#overlayFive .close-overlay-six,#overlayFive .close-overlay-three,#overlayFive .close-overlay-two,#overlayFour .close-overlay-five,#overlayFour .close-overlay-four,#overlayFour .close-overlay-one,#overlayFour .close-overlay-six,#overlayFour .close-overlay-three,#overlayFour .close-overlay-two,#overlayOne .close-overlay-five,#overlayOne .close-overlay-four,#overlayOne .close-overlay-one,#overlayOne .close-overlay-six,#overlayOne .close-overlay-three,#overlayOne .close-overlay-two,#overlaySix .close-overlay-five,#overlaySix .close-overlay-four,#overlaySix .close-overlay-one,#overlaySix .close-overlay-six,#overlaySix .close-overlay-three,#overlaySix .close-overlay-two,#overlayThree .close-overlay-five,#overlayThree .close-overlay-four,#overlayThree .close-overlay-one,#overlayThree .close-overlay-six,#overlayThree .close-overlay-three,#overlayThree .close-overlay-two,#overlayTwo .close-overlay-five,#overlayTwo .close-overlay-four,#overlayTwo .close-overlay-one,#overlayTwo .close-overlay-six,#overlayTwo .close-overlay-three,#overlayTwo .close-overlay-two{caret-color:transparent;position:absolute;top:4%;right:2%;font-size:1.5rem;cursor:pointer;z-index:200}#clientsSection .section-header{color:#fff;margin-bottom:0}#clientsSection .d-flex{max-width:25rem!important}.company-logo{background:#007fd9;border-radius:10rem;padding:.5rem 1.5rem;width:15rem;min-height:6rem;align-items:center;display:flex}.company-logo img{display:block;max-width:10rem;max-height:5rem}.mini-icon{max-height:1.5rem;position:relative;top:-.25rem;-webkit-transition:transform .7s ease-in-out;-moz-transition:transform .7s ease-in-out;-ms-transition:transform .7s ease-in-out;-o-transition:transform .7s ease-in-out;transition:transform .7s ease-in-out}.mini-icon:hover{filter:hue-rotate(120deg)}.about-img{max-width:100%;border-radius:1rem;margin-top:1rem}.toolkit-col{margin-bottom:3rem;caret-color:transparent}.toolkit-col i{font-size:3rem;color:#38acff}.toolkit-icon{width:3rem;min-width:3rem}.toolkit-name{font-family:Sarabun,sans-serif;font-size:1rem;min-width:6rem;text-align:center}#contactSection{background:#38acff}.visuallyHidden:not(:focus):not(:active){position:absolute;width:1rem;height:1rem;margin:-1rem;border:0;padding:0;white-space:nowrap;-webkit-clip-path:inset(100%);clip-path:inset(100%);clip:rect(0 0 0);overflow:hidden}.contact .contactContainer .contactForm input,.contact .contactContainer .contactForm textarea{padding:.4rem;margin:1rem 0;border:.2rem solid #007fd9;border-radius:.2rem;outline:0}.contact .contactContainer{display:flex;justify-content:space-between}.contact .contactContainer .contactInformation,.contact .contactContainer form{display:flex;flex-direction:column}.contact .contactContainer .contactInformation .socialIcons i{padding:0 1rem 0 0;font-size:2rem}.contact .contactContainer .contactForm button{background-color:#007fd9;border:.2rem solid #007fd9;padding:1rem 1.5rem;margin:1rem 0;width:auto;border-radius:1rem;text-decoration:none;color:#fff;text-transform:uppercase}.contact .contactContainer .contactForm button:hover{background:#fff;color:#007fd9;cursor:pointer}#message{max-height:15rem}.socialIcons,.submit-container{text-align:center}#scrollToTopBtn{display:none;position:fixed;bottom:.5rem;right:.1rem;z-index:100;border:none;outline:0;background-color:transparent;color:#fff;cursor:pointer}#scrollToTopBtn i{font-size:2rem;color:#fff;background-color:#007fd9;padding:.45rem .6rem;border-radius:100%;border:.1rem solid #fff}@media (min-width:576px){.toolkit-col{margin-bottom:3rem}}@media only screen and (max-device-width:812px) and (orientation:landscape){.navbar-nav{display:inline-flex;flex-direction:unset;justify-content:center}#mobileNav{padding:2% 0}#mobileNav .nav-item:first-child{padding-top:0}#mobileNav .nav-item{padding-right:1%;width:fit-content}#mobileNav .open-message,.about-img{display:none}#mobileNav a{width:28vw}#welcomeSection .welcome-img{margin-bottom:5%}.col-md-7:first-child,.proj-row{width:100%}.proj-row .proj-five,.proj-row .proj-four,.proj-row .proj-one,.proj-row .proj-six,.proj-row .proj-three,.proj-row .proj-two{max-width:75%!important}#contactSection .col-md-5,#contactSection .col-md-6,.col-12{width:50%}#welcomeSection .welcome-text{text-align:center;width:100%;padding:0 10%}#welcomeSection .welcome-text .resume-btn{width:fit-content;margin:1rem auto}.right-content{order:0!important;margin:0 auto}}@media (min-width:768px){.about-img{max-width:80%;margin:0;float:right}.left-content{justify-content:flex-start}.right-content{justify-content:flex-end}#pageContent{text-align:left}#welcomeSection .resume-btn{font-size:inherit;padding:.5rem 1rem;width:fit-content}#welcomeSection h1{font-size:auto}#aboutAnch,#contactAnch,#projectsAnch{top:-1rem}.proj-row{margin-bottom:3%}.proj-row .proj-five,.proj-row .proj-four,.proj-row .proj-one,.proj-row .proj-six,.proj-row .proj-three,.proj-row .proj-two{margin-bottom:0;max-width:50rem!important}.proj-row .col-md-6{-webkit-box-flex:0;-ms-flex:0 0 47.5%;flex:0 0 47.5%;max-width:47.5%}}@media (min-width:992px){footer,header{background:#030e12}header{position:fixed}footer{position:static;margin-top:2.5rem}#mobileNav,#screenOverlay,#screenOverlay.active,.hamburger,.w-100{display:none}#siteLogo{max-height:4rem;-webkit-transition:transform .7s ease-in-out;-moz-transition:transform .7s ease-in-out;-ms-transition:transform .7s ease-in-out;-o-transition:transform .7s ease-in-out;transition:transform .7s ease-in-out}#siteLogo:hover{transform:rotate(360deg)}#desktopNav{display:flex}.no-scroll{overflow:visible}.navbar{padding:.5rem 1.5rem}.navbar .nav-item{width:auto}.navbar a{font-size:1.2rem;margin:0 1rem}#pageContent{top:2rem}.company-logo{margin-bottom:0}.company-link span{-webkit-transition:transform .3s ease-in-out;-moz-transition:transform .3s ease-in-out;-ms-transition:transform .3s ease-in-out;-o-transition:transform .3s ease-in-out;transition:transform .3s ease-in-out}.company-link span:hover{opacity:.9;transform:scale(1.05)}#aboutSection,#clientsSection,#contactSection,#projectsSection,#toolkitSection,#welcomeSection{padding:5% 10%}.proj-row{margin-bottom:2%}.proj-row .proj-five,.proj-row .proj-four,.proj-row .proj-one,.proj-row .proj-six,.proj-row .proj-three,.proj-row .proj-two{min-height:25rem}.about-img{margin:0}#overlayFive .details-container h2,#overlayFour .details-container h2,#overlayOne .details-container h2,#overlaySix .details-container h2,#overlayThree .details-container h2,#overlayTwo .details-container h2{font-size:2rem}#overlayFive .details-container .project-links .project-btn,#overlayFour .details-container .project-links .project-btn,#overlayOne .details-container .project-links .project-btn,#overlaySix .details-container .project-links .project-btn,#overlayThree .details-container .project-links .project-btn,#overlayTwo .details-container .project-links .project-btn{margin-bottom:1rem}#overlayFive .details-container .toolkits-used .tool,#overlayFour .details-container .toolkits-used .tool,#overlayOne .details-container .toolkits-used .tool,#overlaySix .details-container .toolkits-used .tool,#overlayThree .details-container .toolkits-used .tool,#overlayTwo .details-container .toolkits-used .tool{margin-top:.75rem}#overlayFive .close-overlay-five,#overlayFive .close-overlay-four,#overlayFive .close-overlay-one,#overlayFive .close-overlay-six,#overlayFive .close-overlay-three,#overlayFive .close-overlay-two,#overlayFour .close-overlay-five,#overlayFour .close-overlay-four,#overlayFour .close-overlay-one,#overlayFour .close-overlay-six,#overlayFour .close-overlay-three,#overlayFour .close-overlay-two,#overlayOne .close-overlay-five,#overlayOne .close-overlay-four,#overlayOne .close-overlay-one,#overlayOne .close-overlay-six,#overlayOne .close-overlay-three,#overlayOne .close-overlay-two,#overlaySix .close-overlay-five,#overlaySix .close-overlay-four,#overlaySix .close-overlay-one,#overlaySix .close-overlay-six,#overlaySix .close-overlay-three,#overlaySix .close-overlay-two,#overlayThree .close-overlay-five,#overlayThree .close-overlay-four,#overlayThree .close-overlay-one,#overlayThree .close-overlay-six,#overlayThree .close-overlay-three,#overlayThree .close-overlay-two,#overlayTwo .close-overlay-five,#overlayTwo .close-overlay-four,#overlayTwo .close-overlay-one,#overlayTwo .close-overlay-six,#overlayTwo .close-overlay-three,#overlayTwo .close-overlay-two{font-size:1.75rem}.socialIcons,.submit-container{text-align:left}#scrollToTopBtn{bottom:1rem;right:1.5rem}#scrollToTopBtn i{top:0;-webkit-transition:top .3s ease-out;-moz-transition:top .3s ease-out;-ms-transition:top .3s ease-out;-o-transition:top .3s ease-out;transition:top .3s ease-out;position:relative}#scrollToTopBtn i:hover{box-shadow:1px 1px 10px #fff;top:-.35rem}}@media (min-width:1200px){#overlayFive,#overlayFour,#overlayOne,#overlaySix,#overlayThree,#overlayTwo{padding:3.5%}#overlayFive .details-container h2,#overlayFour .details-container h2,#overlayOne .details-container h2,#overlaySix .details-container h2,#overlayThree .details-container h2,#overlayTwo .details-container h2{font-size:2rem}#overlayFive .details-container .project-links,#overlayFour .details-container .project-links,#overlayOne .details-container .project-links,#overlaySix .details-container .project-links,#overlayThree .details-container .project-links,#overlayTwo .details-container .project-links{margin-top:1rem}#overlayFive .details-container .project-links .project-btn,#overlayFour .details-container .project-links .project-btn,#overlayOne .details-container .project-links .project-btn,#overlaySix .details-container .project-links .project-btn,#overlayThree .details-container .project-links .project-btn,#overlayTwo .details-container .project-links .project-btn{font-size:1rem;margin-bottom:1rem}#overlayFive .details-container .tool,#overlayFive .details-container p,#overlayFour .details-container .tool,#overlayFour .details-container p,#overlayOne .details-container .tool,#overlayOne .details-container p,#overlaySix .details-container .tool,#overlaySix .details-container p,#overlayThree .details-container .tool,#overlayThree .details-container p,#overlayTwo .details-container .tool,#overlayTwo .details-container p{font-size:1rem}}