﻿@font-face{src:url(../fonts/EvelethCleanRegular.otf);font-family:EvelethClean}@font-face{src:url(../fonts/EvelethCleanThin.otf);font-family:EvelethThin}::-webkit-scrollbar{display:none}body,html{margin:0;font-family:Quicksand,sans-serif;overflow-x:hidden!important}html{overflow:hidden}html.scrollable{overflow:initial}.section{display:table;height:100vh;width:100%}.section.scrollable{padding:100px 0}.section .content{display:table-cell;vertical-align:middle;padding:0 calc((100% - 1200px)/ 2)}h1.hide{display:none}h3.title{font-size:5.5em;font-weight:lighter;line-height:50px;user-select:none;letter-spacing:5px;margin:0}h3.title b{display:block;font-size:.7em}h3.title b span{font-size:1.7em}p{font-weight:500;line-height:25px;width:95%;margin:0}p~p{margin-top:30px}p::selection{background-color:#e33838;color:#fff}p span{color:#e33838}p span::selection{background-color:#e33838;color:#fff}img{max-width:100%;max-height:100%;vertical-align:bottom}.scrollAnimation{transition:all .5s ease}.scrollAnimation.animate{transform:translateY(0)!important;opacity:1!important}.scrollAnimation.scrollable{transform:translateY(0)!important;opacity:1!important}.circleAnimation{position:relative;display:inline-table;width:70px;height:70px;text-align:center;font-size:2em;text-decoration:none;color:#000;vertical-align:middle}.circleAnimation~.circleAnimation{margin-left:50px}.circleAnimation i{display:table-cell;vertical-align:middle}.circleAnimation svg{position:absolute;top:0;left:0;width:100%;height:100%}.circleAnimation svg .circle{fill:none;stroke:#e33838;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:62;animation:circleAnimation 5s linear infinite;transition:all 1s ease}.circleAnimation:hover svg .circle{stroke-dasharray:0}@keyframes circleAnimation{0%{stroke-dashoffset:0}100%{stroke-dashoffset:124}}.banner{width:100%;height:100vh}.banner .background{position:absolute;top:0;left:0;width:100%;height:100%;transition:all .5s ease;overflow:hidden;user-select:none}.banner .background:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);opacity:0;transition:all .5s ease}.banner.animate .background:after{opacity:1}.banner .background img{width:100%;min-height:100%;transform:translateY(calc(50vh - 50%));transition:all .5s ease}.banner.animate .background img{filter:blur(2px) grayscale(1);transform:translateY(calc(50vh - 50%)) scale(1.1)}.banner .animation{top:50%;position:absolute;opacity:0;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;transition:all .5s ease}.banner.animate .animation{opacity:1}.banner .animation .logo{display:inline-block;white-space:nowrap;pointer-events:none;vertical-align:middle;user-select:none}.banner .animation .logo span{margin:0 30px;transition:all .5s ease .5s}.banner.animate .animation .logo span:first-child{margin-right:-150px}.banner .animation .slogan{display:inline-block;font-family:EvelethClean;text-align:left;font-size:4em;color:#fff;vertical-align:middle;margin-left:30px}.banner .animation .slogan span{font-family:EvelethThin;display:block;font-size:.6em}.banner .animation .slogan::selection{background-color:#fff;color:#000}.banner .animation .slogan span::selection{background-color:#fff;color:#000}.me h3.title{white-space:nowrap;margin-bottom:80px}.me .side{display:inline-block;vertical-align:middle;position:relative}.me .side:first-child{width:calc(50% + 100px)}.me .side:first-child p{transition-delay:.4s}.me .side:first-child p~p{transition-delay:.8s}.me .side:first-child .social{margin-top:80px;transition-delay:1.2s}.me .side:first-child .scrollAnimation{transform:translateY(100px);opacity:0}.me .side:first-child .myself{display:none}.me .side:first-child #redirectToForm:hover{cursor:pointer}.me .side:last-child{width:calc(50% - 100px);text-align:center}.me .side .myself{opacity:0}.me .side .myself:after,.me .side .myself:before{content:'';position:absolute;z-index:-1;transition:all .5s ease}.me .side .myself:before{width:300px;height:280px;background-color:#e33838;top:-80px;right:0;transform:translateY(-60px)}.me .side .myself:after{width:400px;height:320px;background-color:#eee;bottom:-80px;left:0;transform:translateY(100px)}.me .side .myself>div{width:400px;box-shadow:0 0 10px -1px rgba(0,0,0,.7);user-select:none;cursor:pointer;overflow:hidden;display:inline-block;position:relative;transform:translateY(-100px);transition:all 1.5s ease}.me .side .myself.animate:after,.me .side .myself.animate:before,.me .side .myself.animate>div{transform:translateY(0)}.me .side .myself>div img{transition:all .8s ease}.me .side .myself.animate>div:hover img{transform:scale(1.2)}.me .side .myself>div:after,.me .side .myself>div:before{content:'';position:absolute;width:10%;height:0;padding-top:10%;border:3px solid #e33838;transition:all .5s ease;z-index:1}.me .side .myself>div:after{top:20px;right:20px;border-left:0;border-bottom:0}.me .side .myself>div:before{bottom:20px;left:20px;border-right:0;border-top:0}.me .side .myself>div:hover:after,.me .side .myself>div:hover:before{width:calc(100% - 43px);height:calc(100% - 43px);padding-top:0}.me .side .myself>div .hi{position:absolute;top:0;left:0;width:100%;height:100%;display:table;background-color:rgba(0,0,0,.8);opacity:0;transition:all .5s ease}.me .side .myself>div:hover .hi{opacity:1}.me .side .myself>div .hi div{display:table-cell;vertical-align:middle;color:#fff;font-size:1.2em;padding:40px}.me .side .myself>div .hi div b{margin-bottom:50px;display:block;font-size:1.5em}.me .side .myself>div .hi div p{margin:auto;font-weight:lighter}.section.portfolio .content{padding:0}.portfolio h3.title{width:fit-content;padding:30px calc((100% - 1200px)/ 2) 30px 70px;margin:0 0 100px auto;line-height:60px;text-align:right;background-color:#e33838;color:#fff;font-size:4em;transform:translateX(100px);opacity:0}.portfolio h3.title b{margin-right:-20px}.portfolio .slider{width:100vw;overflow:hidden;position:relative;padding:20px 0;transform:translateY(100px);opacity:0}.portfolio .slider.animate{transition-delay:.5s}.portfolio .slider ul.mat{padding:0;margin:0;white-space:nowrap;width:fit-content;transition:all .8s ease;user-select:none}.portfolio .slider ul.mat li{display:inline-block;width:100vw;vertical-align:middle}.portfolio .slider ul.mat li a{display:block;width:fit-content;transition:all .8s ease}.portfolio .slider ul.mat li.main a{margin-left:calc((100% - 700px)/ 2)}.portfolio .slider ul.mat li:not(.main) a{transform:translateX(50%) scale(.7);margin-left:calc(100% - 700px)}.portfolio .slider ul.mat li.main~li a{transform:translateX(-50%) scale(.7);margin-left:0}.portfolio .slider ul.mat li .image{box-shadow:0 0 10px -1px rgba(0,0,0,.5);width:700px;filter:saturate(.8);transition:all .8s ease}.portfolio .slider ul.mat li:hover .image{filter:saturate(1)}.portfolio .slider ul.mat li .siteTitle{background-color:#e33838;width:250px;padding:25px 45px;margin:-80px 0 0 50%;position:relative;transition:all .8s ease;transform:translateX(-50%);text-align:center}.portfolio .slider ul.mat li:not(.main) .siteTitle{margin-left:100%}.portfolio .slider ul.mat li.main~li .siteTitle{margin-left:0}.portfolio .slider .controls{position:absolute;top:50%;transform:translateY(-50%);width:100%;box-sizing:border-box;font-size:4em;color:#e33838;text-shadow:0 0 10px rgba(0,0,0,.3);z-index:1;pointer-events:none}.portfolio .slider .controls span{width:420px;height:360px;cursor:pointer;float:left;pointer-events:all}.portfolio .slider .controls span:last-child{float:right}.portfolio .slider .controls span.hide{display:none}.contact{height:calc(100vh - 70px)}.section.contact .content{padding:0}.contact h3.title{width:fit-content;padding:30px 70px 30px calc((100% - 1200px)/ 2);margin:0 0 100px;line-height:60px;background-color:#1c1b1e;color:#fff;font-size:4em;transform:translateX(-100px);opacity:0}.contact form{width:calc(768px*.9);margin:auto;transform:translateY(100px);opacity:0}.contact form.animate{transition-delay:.5s}.contact form .inputGroup{overflow:inherit}.contact form .inputGroup:not(:last-child){margin-bottom:50px}.contact form .inputGroup.side{display:inline-block;width:calc(50% - 25px)}.contact form .inputGroup.side~.inputGroup.side{margin-left:50px}.contact form .inputGroup input,.contact form .inputGroup textarea{border:0;font:inherit;padding:5px 0 5px 20px;margin-top:35px;margin-left:-8px;border-bottom:2px solid #e33838;font-size:1.5em;vertical-align:middle;outline:0!important;display:inline-block;transform:translateY(-50%);color:#000;transition:all .5s ease;width:calc(100% - 62px);box-sizing:border-box}.contact form .inputGroup textarea{max-width:calc(100% - 62px);min-width:calc(100% - 62px);max-height:42px;min-height:42px;resize:none}.contact form .inputGroup input::selection,.contact form .inputGroup textarea::selection{background-color:#e33838;color:#fff}.contact form .inputGroup input.required.notFilled~.circleAnimation i,.contact form .inputGroup textarea.required.notFilled~.circleAnimation i{color:#e33838;transition:all .5s ease}.contact form .inputGroup .circleAnimation{float:left}.contact form .inputGroup .circleAnimation:hover svg .circle{stroke-dasharray:62}.contact form .inputGroup input.notFilled~.circleAnimation svg .circle,.contact form .inputGroup input:focus~.circleAnimation svg .circle,.contact form .inputGroup textarea.notFilled~.circleAnimation svg .circle,.contact form .inputGroup textarea:focus~.circleAnimation svg .circle{stroke-dasharray:0}.contact form button.send{padding:15px 40px;font:inherit;font-size:1.3em;color:#e33838;background-color:initial;border:none;display:block;margin:20px auto;outline:0!important;position:relative;cursor:pointer}.contact form button.send:after,.contact form button.send:before{content:'';position:absolute;border:2px solid #e33838;width:0;height:60%;padding-left:20%;transition:all .5s ease}.contact form button.send:before{bottom:0;left:0;border-right:0;border-top:0}.contact form button.send:after{top:0;right:0;border-left:0!important;border-bottom:0!important}.contact form button.send:hover:after,.contact form button.send:hover:before{width:calc(100% - 2px);padding:0;height:calc(100% - 2px)}.contact form button.send.sending:before{border:0;border-left:2px solid #e33838;animation:sendingBefore 2s ease infinite}.contact form button.send.sending:after{border:0;border-right:2px solid #e33838;animation:sendingAfter 2s ease infinite}@keyframes sendingBefore{0%{width:0;height:0;padding-left:0;bottom:0;left:0;top:initial;border-bottom:2px solid #e33838;border-top:0}25%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;bottom:0;left:0;top:initial;border-bottom:2px solid #e33838;border-top:0}26%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;top:0;left:0;bottom:initial;border-bottom:0;border-top:2px solid #e33838}50%{width:0;height:0;padding-left:0;top:0;left:0;bottom:initial;border-bottom:0;border-top:2px solid #e33838}75%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;top:0;left:0;bottom:initial;border-bottom:0;border-top:2px solid #e33838}76%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;bottom:0;left:0;top:initial;border-bottom:2px solid #e33838;border-top:0}100%{width:0;height:0;padding-left:0;bottom:0;left:0;top:initial;border-bottom:2px solid #e33838;border-top:0}}@keyframes sendingAfter{0%{width:0;height:0;padding-left:0;top:0;right:0;bottom:initial;border-top:2px solid #e33838;border-bottom:0}25%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;top:0;bottom:initial;right:0;border-top:2px solid #e33838;border-bottom:0}26%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;bottom:0;right:0;top:initial;border-top:0;border-bottom:2px solid #e33838}50%{width:0;height:0;padding-left:0;bottom:0;right:0;top:initial;border-top:0;border-bottom:2px solid #e33838}75%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;bottom:0;right:0;top:initial;border-top:0;border-bottom:2px solid #e33838}76%{width:calc(100% - 4px);height:calc(100% - 4px);padding-left:0;top:0;right:0;bottom:initial;border-top:2px solid #e33838;border-bottom:0}100%{width:0;height:0;padding-left:0;top:0;right:0;bottom:initial;border-top:2px solid #e33838;border-bottom:0}}.scrollThumb{position:fixed;top:0;right:0;width:10px;height:100%}.scrollThumb.scrollable{display:none}.scrollThumb:before{content:'';position:absolute;top:0;left:0;width:100%;height:calc(100%/3);background-color:#e33838;transition:all .8s ease;transform:translateX(100%);box-shadow:-1px 0 10px -1px rgba(0,0,0,.5)}.me.display~.scrollThumb:before{transform:translateX(0)}.me.display~.scrollThumb.hide:before{transform:translate(100%,0)}.portfolio.display~.scrollThumb:before{transform:translateY(100%)}.portfolio.display~.scrollThumb.hide:before{transform:translate(100%,100%)}.contact.display~.scrollThumb:before{transform:translateY(200%)}.contact.display~.scrollThumb.hide:before{transform:translate(100%,200%)}.footer{height:70px;display:table;width:100%;background-color:#1c1b1e;text-align:center}.footer span{display:table-cell;vertical-align:middle}@media(min-width:1920px){.banner .background img{max-width:100%;max-height:initial}}@media(max-width:1450px){.portfolio .slider ul.mat li .image{width:45vw}.portfolio .slider ul.mat li.main a{margin-left:calc((100% - 45vw)/ 2)}.portfolio .slider ul.mat li:not(.main) a{margin-left:calc(100% - 45vw)}.portfolio .slider ul.mat li .siteTitle{width:30%}}@media(max-width:1400px){.section .content{padding:0 5%}h3.title{font-size:3.7em}.contact h3.title,.portfolio h3.title{font-size:3em;line-height:40px}.contact h3.title{padding:30px 70px 30px 10%;margin-bottom:50px}.portfolio h3.title{padding:30px 70px 30px 10%;margin-bottom:0}.contact form .inputGroup:not(:last-child){margin-bottom:30px}.contact form .inputGroup input,.contact form .inputGroup textarea{margin-left:-6px;font-size:1.2em;width:calc(100% - 64px)}.contact form .inputGroup textarea{max-width:calc(100% - 64px);min-width:calc(100% - 64px)}.contact form button.send{padding:10px 35px;font-size:1.2em}}@media(max-width:1024px){.banner .animation .logo{transform:translateX(-30px)}.banner .animation .slogan{margin:50px 0 0;display:block;text-align:center}.me .side{width:45%!important}.me .side:first-child{margin-right:5%}.me .side~.side{margin-left:5%}.me .side .myself>div{width:80%}.me .side .myself:before{width:55%;height:50%;right:0}.me .side .myself:after{width:80%;height:70%;left:0}.contact h3.title,.portfolio h3.title{line-height:40px;font-size:3em}.contact h3.title{margin-bottom:50px}}@media(max-width:768px){.me .side{display:block;width:100%!important;margin-right:0!important}.me .side~.side{display:none}.me .side .text{display:inline-block;width:50%;vertical-align:middle;font-size:1.2em}.me .side:first-child .myself{display:inline-block;width:45%;vertical-align:middle;margin-left:5%;position:relative;text-align:center}.me .side:first-child .myself:before{width:60%;height:50%;right:-8%;top:-10%}.me .side:first-child .myself:after{width:80%;height:50%;left:-10%;bottom:-15%}.me .side:first-child .myself>div{width:100%}.me .side:first-child .myself.animate>div:hover img{transform:scale(1)}.me .side:first-child .myself>div:hover .hi{opacity:0}.me .side:first-child .myself>div:hover:after,.me .side:first-child .myself>div:hover:before{width:10%;padding-top:10%}.banner .animation{transform:translateX(-50%) translateY(-60%)}.banner .animation .logo{transform:translateX(calc(-30px * .4)) scale(.8);transform-origin:bottom}.banner .animation .slogan{font-size:3em;margin-top:30px}.portfolio .slider .controls{display:none}.portfolio .slider ul.mat li .image{width:90vw}.portfolio .slider ul.mat li a{position:relative}.portfolio .slider ul.mat li.main a{margin-left:calc((100% - 90vw)/ 2);z-index:2}.portfolio .slider ul.mat li.main+li a{z-index:1}.portfolio .slider ul.mat li:not(.main) a{margin-left:calc(100% - 90vw);opacity:.7}.contact form{width:90vw}}@media(max-width:600px){html{overflow:initial}h3.title{letter-spacing:3px}h3.title b{display:block;font-size:.47em}p~p{margin-top:20px}.section{height:initial;min-height:100vh;padding:100px 0;box-sizing:border-box}.scrollAnimation{transform:translate(0)!important;opacity:1!important}.banner .animation{transform:translateX(-50%) translateY(-75%)}.banner .animation .slogan{font-size:1.8em}.banner .animation .logo{transform:translateX(calc(-30px * .25)) scale(.5)}.banner .animation .logo span:first-child{margin-right:-150px}.banner .background img{width:auto;height:100%;max-width:inherit;transform:translateX(-50%)}.banner.animate .background img{transform:translateX(-50%) translateY(calc(50vh - 50%)) scale(1.1)}.me h3.title{white-space:normal;text-align:center;font-size:3.3em;letter-spacing:2px;margin-bottom:40px}.me .side .myself>div .hi{display:none}.me .side .myself:after,.me .side .myself:before,.me .side .myself>div{transform:translateY(0)!important}.me .side:first-child .myself>div:hover:after,.me .side:first-child .myself>div:hover:before{width:10%;height:0}.me .side .text{display:block;width:100%;text-align:center;font-size:1em}.me .side:first-child .myself{width:60%;margin:calc(10% + 40px) 5% 15%}.me .side:first-child .social{display:inline-block;width:30%;vertical-align:middle;text-align:right}.me .side:first-child .social .circleAnimation{display:table;margin-left:auto}.me .side:first-child .social .circleAnimation~.circleAnimation{margin:30px 0 0 auto}.contact .content,.portfolio .content{display:table-cell}.contact h3.title b,.portfolio h3.title b{margin:20px 0 0 0;line-height:30px}.portfolio{background-color:#e33838}.portfolio h3.title{background:0 0;text-align:center;font-size:3em;padding:0 5%;margin:0 auto 30px}.portfolio h3.title b span{font-size:inherit}.portfolio .slider ul.mat li .siteTitle{background-color:#1c1b1e}.contact{min-height:calc(100vh - 70px);background-color:#1c1b1e}.contact h3.title{background-color:transparent;margin:0 0 50px;text-align:center;padding:0;width:100%;font-size:3.5em}.contact form .inputGroup input,.contact form .inputGroup textarea{background-color:transparent;border-color:#e33838;color:#fff}.contact form .inputGroup.side{display:block;width:100%;margin-left:0!important}.contact form .inputGroup .circleAnimation i,.contact form button.send{color:#fff}}