@import url(https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap);body{font-family:'Kanit',sans-serif;margin:0;padding:0;overflow:auto}#main{position:relative}#main,section,footer{float:left;width:100%;position:relative}section h2{font-size:3rem}section p{font-size:1.2rem}section .c-holder{padding:0 15px;position:relative}.contact-us .c-holder{margin-bottom:5rem!important}.contact .c-holder{background:#040404}section.about .c-holder{max-width:60%;font-size:1.4rem;margin:0 auto;align-items:center;min-height:390px;position:relative;z-index:20;margin-bottom:-200px}section.about .about-side{display:table;background:#040404;color:#fff;padding:30px;font-size:1rem;max-width:40%;float:right;height:330px;position:absolute;right:0;top:300px;display:none}section.about .about-side span{display:table-cell;vertical-align:middle;font-size:2rem}.projects.in-content:after{content:'';width:100%;height:100%;position:absolute;left:0;top:0;background:linear-gradient(to top,#000 0%,rgb(0 0 0 / .4) 50%,#fff0 100%)}section.contact{display:flex;background:#040404;padding-top:100px}section.contact .c-holder{color:#fff;max-width:900px;font-size:2rem;margin:0 auto;text-align:center;float:left}section.contact-us{background:#000;color:#fff;font-size:2rem;margin:0 auto;text-align:center;float:left}body.home header{position:relative;min-height:100vh;background:#040404;color:#fff;overflow:hidden}.header-transition{position:relative;z-index:5;height:302px;margin-top:-300px;pointer-events:none;background:linear-gradient(to top,rgb(255 255 255) 0%,rgb(255 255 255) 5%,rgb(255 255 255 / .95) 15%,rgb(255 255 255 / .8) 30%,rgb(255 255 255 / .4) 60%,#fff0 100%);transform:translateY(2px);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}#about .c-holder{transform:translateY(30px);transition:opacity 0.8s ease-out,transform 0.8s ease-out}header .h-holder{position:relative;line-height:70px;background:#040404;padding:15px;height:70px}header .h-logo{float:left;width:200px;color:#fff;font-size:2rem;font-weight:400;text-transform:uppercase;position:relative;z-index:10;font-weight:600;line-height:70px}header .h-logo a{color:#fff;text-decoration:none}header .burger{height:70px;position:relative}header .nav{position:relative;float:right;margin:10px 0;display:block;z-index:999}.close{position:absolute;top:0;right:0;margin:0 10px 10px;display:block;z-index:1001;cursor:pointer;padding:15px}.nav .line,.close .line{width:30px;height:3px;background-color:#fff!important;display:block;margin:6px auto;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;color:#fff}.nav.clicked .line{margin:10px auto}.nav:hover{cursor:pointer}.nav.clicked .line:nth-child(2),.close .line:nth-child(2){opacity:0}.nav.clicked .line:nth-child(1),.close .line:nth-child(1){-webkit-transform:translateY(13px) rotate(45deg);-ms-transform:translateY(13px) rotate(45deg);-o-transform:translateY(13px) rotate(45deg);transform:translateY(13px) rotate(45deg)}.nav.clicked .line:nth-child(3),.close .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(-45deg);-ms-transform:translateY(-13px) rotate(-45deg);-o-transform:translateY(-13px) rotate(-45deg);transform:translateY(-13px) rotate(-45deg)}header .intro-pic-holder{width:100%;height:100%;position:absolute;top:0;left:0;height:660px}header .intro-pic{background-image:url(../img/portfolio_pic_mobile4.png);background-repeat:no-repeat;background-size:cover;background-position:center top;width:100%;height:660px;display:none}body.home header{height:100vh}header .intro-text{width:100%;float:left;padding:2vw;margin-top:5%}header .intro-text h1{font-size:3.2rem;font-weight:500;padding-top:0;margin-top:0;line-height:.9}header .intro-text h3{font-size:1.2rem;line-height:1.3;font-weight:400}.bg-img{position:absolute;overflow:hidden;top:0;left:0;right:0;bottom:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bg-img img{position:absolute;top:0;left:0;display:block;min-width:100%;min-height:100%}.title{z-index:1000;margin:0 auto;padding:0 1.25em;width:100%;text-align:center;position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.title h1{padding:0 0 .2em;color:#fff;font-weight:800;font-size:3.25em;margin:0 auto}.title p{color:#fff;padding:0 0 .6em;font-weight:300;font-size:.85em;margin:0 auto}.title h1,.title p.subline{line-height:1}.title p.subline{font-size:1.75em}.trigger.bounce{cursor:pointer;display:none!important;position:absolute!important}.container:not(.notrans) .trigger{-webkit-transition:opacity 0.3s 0.5s;transition:opacity 0.3s 0.5s}.container.modify:not(.notrans) .trigger{opacity:0;pointer-events:none;-webkit-transition-delay:0s;transition-delay:0s}.content{margin:0 auto}.content>div:not(.title){max-width:900px}.content>div:not(.title) p:first-child{font-size:1.35em}.content h3{margin:0;font-size:1.4em}.content blockquote{padding:.25em;font-style:italic;font-size:1.65em;font-family:'Lora',serif;line-height:1.4}.content blockquote::before{content:'\201C'}.content blockquote::after{content:'\201D'}.menu-holder{background-color:040404;position:fixed;z-index:9;top:0;right:0;height:100%;max-width:100%;width:100%;padding:80px 0 0 20px;overflow-y:auto;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:transform 0.55s cubic-bezier(.785,.135,.15,.86);-moz-transition:transform 0.55s cubic-bezier(.785,.135,.15,.86);transition:transform 0.55s cubic-bezier(.785,.135,.15,.86);display:flex;justify-content:center;text-align:center;animation-name:changebg;animation-duration:6.0s;animation-timing-function:ease-out;animation-direction:alternate;animation-iteration-count:infinite;animation-play-state:running}@keyframes changebg{0%{opacity:.2;background-color:#4f1a36cc}50%{background-color:#040404ba}100%{background-color:#1d2453c2}}.menu-holder.show{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.menu-holder.show .menu ul li{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;margin-bottom:.6rem}.menu-holder.show .menu ul li:nth-child(1){transition-delay:0.15s}.menu-holder.show .menu ul li:nth-child(2){transition-delay:0.3s}.menu-holder.show .menu ul li:nth-child(3){transition-delay:0.45s}.menu-holder.show .menu ul li:nth-child(4){transition-delay:0.6s}.menu-holder.show .menu ul li:nth-child(5){transition-delay:0.75s}.menu-holder .menu{margin-top:15rem}.menu-holder .menu ul{list-style-type:none;margin:0 auto;padding:0}.menu-holder .menu ul li{margin-bottom:20px;-webkit-transform:translateX(40px);-moz-transform:translateX(40px);-ms-transform:translateX(40px);-o-transform:translateX(40px);transform:translateX(40px);opacity:0;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;margin-bottom:.6rem}.menu-holder .menu ul li:last-of-type{margin-bottom:0}.menu-holder .menu ul li a{color:#fff;font-family:"Raleway",sans-serif;text-decoration:none;text-transform:uppercase;font-size:1.4rem;display:block;letter-spacing:5px;font-weight:600;margin:0;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;padding:0}.menu-holder .menu ul li a span{color:#b7ac7f}.trigger{float:left;width:100%;margin-top:20vh;opacity:.6;background:#fff0;border:none;display:none}.trigger span{display:none}.bounce{animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}section.projects{background:#040404}.projects.in-content{background:#fff0}section.projects h2{color:#fff;margin:0vw 0 0}.portfolio-projects{display:flex;flex-flow:row wrap;width:100%;max-width:1300px;justify-content:center;margin:0;padding:0;overflow:hidden}.projects.in-content .portfolio-projects{padding:30px 0 0 0;filter:contrast(1.2);margin-bottom:-30px}.projects.in-content .portfolio-projects{transform:translateY(60px);opacity:0;transition:transform 1.2s cubic-bezier(.22,.9,.28,1),opacity 0.6s ease}body.home .see-projects{transform:translateY(60px);opacity:0;transition:transform 1.2s cubic-bezier(.22,.9,.28,1),opacity 0.6s ease}.projects.in-content .portfolio-projects.visible,.projects.in-content .see-projects.visible{transform:translateY(0);opacity:1}.projects.in-content .portfolio-projects li{flex-basis:50%;-ms-flex:auto;width:259px;position:relative;padding:10px;box-sizing:border-box}.projects.in-content .portfolio-projects li{flex-basis:33.3%}.projects .cta-holder{display:flex;justify-content:center;align-items:center;width:100%;height:600px;position:absolute;top:0;left:0}.projects .cta-holder .see-projects{font-size:1.8rem;color:#c7c7c7;z-index:1;position:relative;text-decoration:none}.projects .cta-holder .see-projects:after{content:"";position:absolute;width:0;display:block;transition:all 0.3s ease;left:0;bottom:14%;width:100%;height:2px;background-color:#fff;bottom:0}.modal-overlay{position:fixed;inset:0;background:rgb(0 0 0 / .7);backdrop-filter:blur(4px);display:none;justify-content:flex-start;align-items:flex-start;overflow-y:auto;z-index:1000;transition:ease-out 0.4s;padding-top:0}.modal-box{background:#222;max-width:100%;width:100%;transform:translateY(30px);opacity:0;transition:transform 0.3s ease,opacity 0.3s ease;overflow:inherit;height:100%}.modal-overlay.show{display:flex}.modal-overlay.show .modal-box{transform:translateY(0);opacity:1}.portfolio-projects li{display:inline-block;margin:0;padding:10px;text-align:left;position:relative}.portfolio-projects figure{margin:0;position:relative;display:flex;align-items:center;justify-content:center}.portfolio-projects figure img{max-width:100%;display:block;position:absolute;width:545px;z-index:1;filter:brightness(.7)}.portfolio-projects figure img.mobile{display:none}.projects.in-content .portfolio-projects figure img{position:relative}.portfolio-projects figcaption{position:absolute;top:0;left:0;background:#000;color:#fff;max-width:100%}.portfolio-projects figcaption h3{margin:0;padding:0;color:#fff;padding:20px 0 0 20px}.portfolio-projects figcaption span{padding:0 20px}.portfolio-projects figcaption span:before{content:'by '}.portfolio-projects figcaption a{text-align:center;padding:5px 10px;display:inline-block;background:#fff;color:#111;text-decoration:none}.portfolio-projects figure{overflow:hidden}.portfolio-projects figure video{-webkit-transition:-webkit-transform 0.4s;-moz-transition:-moz-transform 0.4s;transition:transform 0.4s;width:545px;height:340px}.no-touch .portfolio-projects figure:hover video,.portfolio-projects figure.cs-hover img{-webkit-transform:translateY(-50px);-moz-transform:translateY(-50px);-ms-transform:translateY(-50px);transform:translateY(-50px)}.portfolio-projects figcaption{height:100px;width:100%;top:auto;bottom:0;opacity:0;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 0.4s,opacity 0.1s 0.3s;-moz-transition:-moz-transform 0.4s,opacity 0.1s 0.3s;transition:transform 0.4s,opacity 0.1s 0.3s}.no-touch .portfolio-projects figure:hover figcaption,.portfolio-projects figure.cs-hover figcaption{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 0.4s,opacity 0.1s;-moz-transition:-moz-transform 0.4s,opacity 0.1s;transition:transform 0.4s,opacity 0.1s}.portfolio-projects figcaption a{position:absolute;bottom:34px;right:20px}video::-webkit-media-controls{display:none!important}.c-holder{padding:0;max-width:900px;margin:0 auto}.c-holder h2{float:left;width:100%;font-size:2rem;line-height:1}.count .c-holder{display:flex;align-items:center;justify-content:space-between}.count .c-col{width:30%}.count .c-col h3{text-align:center;padding:0;margin:0 0 1rem}.count .circle{position:relative;width:200px;height:200px;margin:0 auto;padding:0 20px 0;color:#000}.count svg{transform:rotate(-90deg)}.count .track{stroke:rgb(159 159 159 / 10%);stroke-width:20;fill:none}.count .progress{stroke-linecap:round;stroke-width:20;fill:none;stroke-dasharray:502;stroke-dashoffset:502;transition:stroke-dashoffset 4s ease-in-out,stroke 3s ease-in-out;stroke:rgb(159 159 159 / 50%)}.count.visible .progress{stroke-dashoffset:0;stroke:#274ca185}.count .num-holder{position:relative;float:left;width:100%;display:flex;justify-content:center}.count .num{inset:0;display:flex;justify-content:center;align-items:center;font-size:50px;font-weight:700;position:absolute}.count .plus,.count .percentage{float:left;line-height:60px;font-size:1.8rem;position:absolute;top:50%;left:64%;transform:translate(-50%,-50%)}.count .projects .plus{position:absolute;left:67%}.count .quality .percentage{position:absolute;left:72%;font-size:1.4rem}.count .circle.glow .progress{transition:stroke-dashoffset 3s ease-in-out,stroke 3s ease-in-out;filter:blur(12px) drop-shadow(0 0 25px rgb(1 40 129 / .5))}form{width:100%;float:left}form input{width:100%;float:left;margin:1rem 0;padding:.5rem 0;border-top:0;border-left:0;border-right:0;border-bottom:2px solid #fff;background:#fff0;color:#fff;font-size:1.4rem}form textarea{width:100%;float:left;margin:1rem 0;padding:1rem;border:2px solid #fff;background:#fff0;color:#fff;font-size:1.4rem}input::placeholder,textarea::placeholder{opacity:.5;color:#fff;font-size:1.2rem;font-weight:300}textarea:focus,input:focus{outline:none}input:focus::placeholder,textarea:focus::placeholder{opacity:0}form input#fname,form input#email,form input#phonenum,form input#subject{width:47.1%;float:left;text-align:left}input:-internal-autofill-selected{background-color:transparent!important}form input#email,form input#subject{float:right}form .send-cta,.contact-cta{color:#FFF;border:2px solid #fff;border-radius:0;line-height:50px;display:inline-block;font-size:1.4rem;letter-spacing:1px;cursor:pointer;box-shadow:inset 0 0 0 0 #fff;-webkit-transition:ease-out 0.4s;-moz-transition:ease-out 0.4s;transition:ease-out 0.4s;font-weight:700;text-decoration:none}.contact-cta{width:100%;background:#fff;color:#000}form .send-cta:hover{box-shadow:inset 0 0 0 50px #fff;color:#000}.contact-cta:hover{box-shadow:inset 0 0 0 50px #000;color:#fff}#loader-overlay{position:fixed;inset:0;background:rgb(18 18 18 / 80%);z-index:9999;display:none}#loader-overlay .loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}footer{text-align:center;background:#1f1f1f;color:#fff;padding:5px 0}#mobile-indicator{display:none}@media screen and (max-width:47em){.title,.content{font-size:70%}.intro-effect-side .title{width:100%;padding:0 1em;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.intro-effect-side.modify .bg-img::before{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.intro-effect-side .bg-img::after{border-left-width:0;border-right-width:0;right:0;left:0;background:rgb(255 255 255 / .1)}.intro-effect-side.modify .bg-img::after{background:rgb(255 255 255 / .8)}.intro-effect-sidefixed .content{width:100%;margin-left:auto}.intro-effect-sidefixed .bg-img::after{width:95%}}@media screen and (max-width:27em){.intro-effect-jam3 .content{padding:0 2em 5em}.intro-effect-portfolio-projects .portfolio-projects li h2{display:none}.intro-effect-push header .title{top:60px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.title,.content{font-size:50%}.trigger::before{display:none}}@media(max-width:768px){#mobile-indicator{display:block}.portfolio-projects figure img.mobile{display:inline-block}.portfolio-projects figure img.desktop{display:none}.portfolio-projects figure .figcaption{display:none}.projects .cta-holder .see-projects{font-size:1.4rem}form input{margin:.5rem 0 .8rem;font-size:1rem}form input#fname,form input#email,form input#phonenum,form input#subject{width:100%}}@media(min-width:768px) and (max-width:1200px){body.home header{height:700px;min-height:700px}.intro-pic_holder,.intro-pic{height:700px!important}}@media(max-width:555px){.count .c-holder{display:inherit}.count .c-col{width:100%}.portfolio-projects li{flex-basis:100%}.projects.in-content{margin-bottom:-2}.projects .cta-holder{height:380px}section.projects h2{margin-top:6vw}.nav .line,.close .line{margin:10px auto}.close{margin:0}}@media(max-width:1073px){.portfolio-projects li{flex-basis:33.33%}}@media(max-width:815px){.portfolio-projects li{flex-basis:100%}.portfolio-projects li figure img,.portfolio-projects li figure img{width:100%}}@media screen and (min-width:1200px){.nav .line,.close .line{width:40px;height:4px;margin:7px;margin:9px}.nav.clicked .line{margin:9px}header .intro-text{max-width:600px;float:right;margin-right:15%;margin-top:3%}header .intro-text h1{font-size:5rem;font-weight:500;padding-top:0;margin-top:0;line-height:.9}header .intro-text h3{font-size:1.5rem;line-height:1.3;font-weight:400}header .intro-pic-holder{position:absolute;width:50%;max-width:1000px;left:0;top:10%}header .intro-pic{display:none;background-image:url(../img/portfolio_pic5.png);width:100%;height:1000px;background-repeat:no-repeat}.projects .c-holder{min-width:1300px}.c-holder{padding:0 2vw;margin:0 auto}.c-holder h2{font-size:2.7rem}}