@keyframes fadeInner{to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}header{position:fixed;z-index:2;width:100%}main{padding:4rem;min-height:calc(100vh - 60px)}main .icons{margin-top:1rem}main .icons a{padding:0.4rem}main .icons a:hover{color:#0faed6;transition:all 0.5s ease-out}main#home{overflow:hidden}main#home h1{margin-top:30vh}.menu-btn{position:absolute;z-index:1002;right:35px;top:35px;cursor:pointer;transition:all 0.5s ease-out}.menu-btn .btn-line{width:28px;height:3px;margin:0 0 5px 0;background:#fff;transition:all 0.5s ease-out}.menu-btn.close{transform:rotate(180deg)}.menu-btn.close .btn-line:nth-child(1){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{position:fixed;top:0;width:100%;visibility:hidden;z-index:11}.menu.show{visibility:visible}.menu-branding,.menu-nav{display:flex;flex-flow:column wrap;align-items:center;justify-content:center;float:left;width:50%;height:100vh;overflow:hidden;z-index:11}.menu-nav{margin:0;padding:0;background:#373737;list-style:none;transform:translate3d(0, -100%, 0);transition:all 0.5s ease-out}.menu-nav.show{transform:translate3d(0, 0, 0)}.menu-branding{background:#444;transform:translate3d(0, 100%, 0);transition:all 0.5s ease-out}.menu-branding.show{transform:translate3d(0, 0, 0)}.menu-branding .portrait{width:250px;height:310px;background:url(../img/peter-headshot-portrait-mini.jpg);border-radius:5%;border:solid 3px #0faed6}.menu .nav-item{transform:translate3d(600px, 0, 0);transition:all 0.5s ease-out}.menu .nav-item.show{transform:translate3d(0, 0, 0)}.menu .nav-item.current>a{color:#0faed6}.menu .nav-link{display:inline-block;position:relative;font-size:2rem;text-transform:uppercase;padding:1rem 0;font-weight:300;color:#fff;text-decoration:none;transition:all 0.5s ease-out}.menu .nav-link:hover{color:#0faed6}.nav-item:nth-child(1){transition-delay:.15s}.nav-item:nth-child(2){transition-delay:.3s}.nav-item:nth-child(3){transition-delay:.45s}.nav-item:nth-child(4){transition-delay:.6s}.form-holder{position:relative;width:75%;min-height:50vh;padding:2rem;background-color:#444;color:#000;border-radius:10px;align-items:center;justify-content:center;z-index:0;align-items:center}.form-holder .form{width:100%;max-width:820px;background-color:#b7edfa;border-radius:10px;box-shadow:0px 0px 20px 2px rgba(0,0,0,0.75);z-index:9;overflow:hidden;display:grid;grid-template-columns:repeat(2, 1fr)}.form-holder .form .contact-form{background-color:#0d9bbe;position:relative}.form-holder .form .contact-form:before{content:"";position:absolute;width:26px;height:26px;background-color:#0d9bbe;transform:rotate(45deg);top:50px;left:-13px}.form-holder .form .contact-form .circle{border-radius:50%;background:linear-gradient(135deg, transparent 20%, #0a748f);position:absolute}.form-holder .form .contact-form .circle.one{width:130px;height:130px;top:130px;right:-40px}.form-holder .form .contact-form .circle.two{width:80px;height:80px;top:10px;right:30px}.form-holder .form .contact-form form{padding:2.3rem 2.2rem;z-index:9;overflow:hidden;position:relative}.form-holder .form .contact-form form .form-title{color:#fff;font-weight:500;font-size:1.5rem;line-height:1;margin-bottom:0.7rem}.form-holder .form .contact-form form .input-container{position:relative;margin:1rem 0}.form-holder .form .contact-form form label{display:1}.form-holder .form .contact-form form .input{width:100%;outline:none;border:2px solid #fafafa;background:none;padding:0.6rem 1.2rem;color:#fff;font-weight:500;font-size:0.95rem;letter-spacing:0.5px;border-radius:25px;transition:0.3s}.form-holder .form .contact-form form textarea.input{padding:0.8rem 1.2rem;min-height:150px;border-radius:22px;resize:none;overflow-y:auto;font-family:"Noto Sans JP", "Segoe UI", Tahoma, Verdana, sans-serif;font-weight:500;font-size:0.95rem}.form-holder .form .contact-form form .input-container label{position:absolute;top:50%;left:15px;transform:translateY(-50%);padding:0 0.4rem;color:#fafafa;font-size:0.9rem;pointer-events:none;z-index:10;transition:0.5s}.form-holder .form .contact-form form .input-container.textarea label{top:1rem;transform:translateY(0)}.form-holder .form .contact-form form .btn{padding:0.6rem 1.3rem;background-color:#fff;border:2px solid #fafafa;font-size:0.95rem;font-weight:600;color:#0faed6;line-height:1;border-radius:25px;outline:none;cursor:pointer;transition:0.3s}.form-holder .form .contact-form form .btn:hover{background-color:transparent;color:#fff}.form-holder .form .contact-form form .input-container span{position:absolute;top:0;left:25px;transform:translateY(-50%);font-size:0.8rem;padding:0 0.4rem;color:transparent;pointer-events:none;z-index:5}.form-holder .form .contact-form form .input-container span:before,.form-holder .form .contact-form form .input-container span:after{content:"";position:absolute;width:10%;opacity:0;transition:0.3s;height:5px;background-color:#0d9bbe;top:50%;transform:translateY(-50%)}.form-holder .form .contact-form form .input-container span:before{left:50%}.form-holder .form .contact-form form .input-container span:after{right:50%}.form-holder .form .contact-form form .input-container.focus label{top:0;transform:translateY(-50%);left:25px;font-size:0.8rem}.form-holder .form .contact-form form .input-container.focus span:before,.form-holder .form .contact-form form .input-container.focus span:after{width:50%;opacity:1}.form-holder .contact-info{padding:2.3rem 2.2rem;position:relative}.form-holder .contact-info:before{content:"";position:absolute;width:110px;height:100px;border:22px solid #0faed6;border-radius:50%;bottom:-77px;right:50px;opacity:0.3}.form-holder .contact-info .form-title{color:#0c87a6;font-weight:500;font-size:1.5rem;line-height:1;margin-bottom:0.7rem}.form-holder .contact-info p{color:#444}.form-holder .big-circle{position:absolute;z-index:-1;width:400px;height:400px;border-radius:50%;background:linear-gradient(to bottom, #28c8f0, #0a748f);bottom:50%;right:50%;transform:translate(-40%, 38%)}.form-holder .big-circle:after{content:"";position:absolute;width:260px;height:260px;background-color:#444;border-radius:50%;top:calc(50% - 130px);left:calc(50% - 130px)}.form-holder .bottom-circle{position:absolute;z-index:-1;width:400px;height:400px;border-radius:50%;background:linear-gradient(to bottom, #28c8f0, #0a748f);bottom:20%;right:-25%;transform:translate(-40%, 38%);opacity:0.3}.form-holder .bottom-circle:after{content:"";position:absolute;width:260px;height:260px;background-color:#444;border-radius:50%;top:calc(50% - 130px);left:calc(50% - 130px);z-index:-1}section{margin:20px;padding:0}.headshots-container{max-width:650px;margin:auto;box-shadow:0px 0px 20px 2px rgba(0,0,0,0.75)}.headshots-container .main-img img{width:100%}.headshots-container .imgs{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:5px}.headshots-container .imgs img{width:100%}.headshot-container{opacity:0;display:none;transition:opacity 1s ease-in}.loader-holder{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:100vh;background:gradient(linear, left top, right top, from(#333), to(#eaeaea));background:linear-gradient(90deg, #333, #eaeaea);box-shadow:inset 0px 0px 90px rgba(0,0,0,0.5)}.loader{width:100px;height:102px;border-radius:100%;position:absolute;top:45%;left:calc(50% - 50px)}.circle{width:100%;height:100%;position:absolute}.circle .inner{width:100%;height:100%;border-radius:100%;border:5px solid rgba(234,234,234,0.7);border-right:none;border-top:none;background-clip:padding;box-shadow:inset 0px 0px 10px rgba(51,51,51,0.15)}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.circle:nth-of-type(0){transform:rotate(0deg)}.circle:nth-of-type(0) .inner{animation:spin 2s infinite linear}.circle:nth-of-type(1){transform:rotate(70deg)}.circle:nth-of-type(1) .inner{animation:spin 2s infinite linear}.circle:nth-of-type(2){transform:rotate(140deg)}.circle:nth-of-type(2) .inner{animation:spin 2s infinite linear}.loader{animation:spin 5s infinite linear}*{box-sizing:border-box}body{animation:fadein 2s;height:100%;margin:0;font-family:"Noto Sans JP", "Segoe UI", Tahoma, Verdana, sans-serif;line-height:1.5;background:#444;color:#fff}body#bg-img{background:url(../img/peter-headshot-xl-screens.jpg);background-attachment:fixed;background-size:cover;height:100vh;height:calc(var(--vh, 1vh) * 100)}body#bg-img:after{content:"";position:absolute;top:0;right:0;width:100%;height:100%;z-index:-1;background:rgba(68,68,68,0.7)}h1,h2,h3{margin:0;font-weight:400}h1.lg-heading,h2.lg-heading,h3.lg-heading{font-size:6rem;margin-bottom:2rem}h1.sm-heading,h2.sm-heading,h3.sm-heading{margin-bottom:1rem}.my-1{margin:0 0 1rem 0}a{color:#fff;text-decoration:none}.text-secondary{color:#0faed6}.text-secondary-lighter{color:#b7edfa}.tagline-box{position:fixed;bottom:5rem;left:2rem;padding:0 1rem 0 0}.spotlight-icon{padding-top:4px;width:32px;height:32px}.spotlight-icon:hover{filter:brightness(0) saturate(100%) invert(78%) sepia(49%) saturate(7175%) hue-rotate(153deg) brightness(95%) contrast(88%)}.about-info{display:grid;grid-gap:30px;grid-template-areas:"bioimage bio bio" "job1 job2 job3";grid-template-columns:repeat(3, 1fr)}.about-info .bio-img{grid-area:bioimage;margin:auto;border-radius:5%;border:#0faed6 3px solid}.about-info .bio{grid-area:bio;font-size:1.4rem}.about-info .job-1{grid-area:job1}.about-info .job-2{grid-area:job2}.about-info .job-3{grid-area:job3}.about-info .job{background:#515151;padding:0.6rem;border-bottom:#0faed6 3px solid;border-right:#0faed6 3px solid;border-top:#404040 1px solid;border-left:#404040 1px solid;border-radius:5px;line-height:1.7rem}.about-info .job:hover{border:#0faed6 3px solid;box-shadow:0px 0px 20px 2px rgba(0,0,0,0.75);transition:all 0.5s ease-out}.about-info .job:hover .text-secondary{font-size:1.3rem}.bg-lines{background:linear-gradient(to bottom, #5e5e5e, #1e1e1e);background-attachment:fixed;background-size:cover;height:100vh}.media{display:grid;grid-gap:3rem;grid-template-columns:repeat(3, 1fr);grid-template-areas:"img showreel showreel" "music music showshots"}.media .item{text-align:center}.media .item:nth-child(1){grid-area:img}.media .item:nth-child(2){grid-area:showreel}.media .item:nth-child(3){grid-area:music}.media .item:nth-child(4){grid-area:showshots}.media h3.item-header{font-size:2rem;align-items:center;text-align:center;margin-bottom:1.5rem}.media img{width:100%;border:3px #fff solid}.media img:hover{box-shadow:0px 0px 20px 2px rgba(0,0,0,0.75);opacity:0.5;border-color:#0faed6;transition:all 0.5s ease-out}.media iframe{width:100%;border:3px #fff solid}.media iframe:hover{box-shadow:0px 0px 20px 2px rgba(0,0,0,0.75);border-color:#0faed6;transition:all 0.5s ease-out}.media .media-btn{padding:0.6rem 1.3rem;background-color:transparent;color:#fff;border:2px solid #fafafa;font-size:0.95rem;font-weight:600;line-height:1;border-radius:25px;outline:none;cursor:pointer;transition:0.3s}.media .media-btn:hover{color:#0faed6;background-color:#fff}.grow img{z-index:11;transform:scale(6) translate(25%, 0%) !important}#contact{display:grid;place-items:center}.contact-note{margin:2rem 0rem}.boxes{display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:center;margin-top:0.8rem}.boxes div{font-size:1rem;border:3px #fff solid;border-radius:20px;padding:0.5rem 0.5rem;margin-bottom:1.5rem;transition:all 0.5s ease-out}.boxes div a{color:#000}.boxes div:hover{padding:0.5rem 1.5rem;background:#0faed6;color:#000}.boxes div:hover span{color:#000}.back-button{position:absolute;top:35px;left:35px}#main-footer{text-align:center;padding:1rem;background:#2b2b2b;color:#fff;height:60px;z-index:1}@media screen and (min-width: 1171px){body#bg-img{background:url(../img/peter-headshot-xl-screens.jpg);background-attachment:fixed;background-size:cover;height:100vh;background-position:center;background-repeat:no-repeat}.menu-btn{right:60px;top:60px}main{align-items:center;text-align:left}main#contact{padding:2rem}main#home h1{margin-top:5vh}main .lg-heading{line-height:1;margin-bottom:2rem}main .sm-heading{font-size:2rem;margin-top:2rem}.tagline-box{position:fixed;bottom:10rem;left:3rem;padding:0 1rem 0 0}.media{grid-template-columns:repeat(4, 1fr);grid-template-areas:"img showreel music showshots"}.media .item{padding:0}.media iframe{height:100%}.form-holder{align-items:center !important;display:grid;place-items:center}}@media screen and (min-width: 769px) and (max-width: 1170px){body#bg-img{background:url(../img/peter-headshot-tablet-background.jpg);background-attachment:fixed;background-size:cover;height:100vh;background-position:center;background-repeat:no-repeat}main{align-items:center;text-align:left}main#home h1{margin-top:5vh}main .lg-heading{line-height:1}main .sm-heading{font-size:2rem}.tagline-box{position:fixed;bottom:8rem;left:5rem;padding:0 1rem 0 0}.media{grid-template-columns:repeat(9, 1fr);grid-template-areas:". img img img . showreel showreel showreel . " ". music music music . showshots showshots showshots ."}.media .item{padding:0}.form-holder{align-items:center !important;display:grid;place-items:center;width:100%;padding:0}.bottom-circle{transform:translate(-120%, 18%)}}@media screen and (max-width: 768px){body#bg-img{background:url(../img/peter-headshot-portrait-tablet-background.jpg);background-attachment:fixed;background-size:cover;height:100vh;background-position:center;background-repeat:no-repeat}body#bg-img:after{height:100vh;height:calc(var(--vh, 1vh) * 100)}main{align-items:center;text-align:left}main#home{position:relative}main#home .tagline-box{position:absolute;bottom:2rem;left:4rem;padding:0 1rem 0 0}main#home h1{margin-top:5vh}main .lg-heading{line-height:1;margin-bottom:2rem}main .sm-heading{font-size:3rem}.menu ul.menu-nav,.menu div.menu-branding{float:none;width:100%;min-height:0}.menu-nav{height:75vh;transform:translate3d(100%, 0, 0);font-size:2rem}.menu-nav.show{transform:translate3d(0, 0, 0)}.menu-branding{height:25vh;transform:translate3d(-100%, 0, 0)}.menu-branding.show{transform:translate3d(0, 0, 0)}.menu-branding .portrait{background:url(../img/peter-headshot-portrait-small.jpg);width:150px;height:150px}.about-info{grid-template-areas:"bioimage" "bio" "job1" "job2" "job3";grid-template-columns:1fr}.media{grid-template-columns:repeat(3, 1fr)}.form-holder{align-items:center !important;display:grid;place-items:center;width:100%;padding:0}.form-holder .form{grid-template-columns:1fr !important}.form-holder .form .contact-form:before{top:-13px;left:initial;right:70px}.form-holder .contact-info:before{bottom:initial;top:-75px;right:45px;transform:scale(0.95)}.form-holder .bottom-circle{transform:translate(30%, 43%);height:350px}.form-holder .big-circle{bottom:75%;transform:scale(0.9) translate(-40%, 30%);right:50%}.form-holder .bottom-circle{display:none}.form-holder .text{margin:1rem 0 1.5rem 0}.headshots-container .carousel-container{width:90%;height:auto}.headshots-container .carousel-container img{max-width:100%;height:auto;object-fit:contain}}@media screen and (max-width: 600px){body#bg-img{background:url(../img/peter-headshot-portrait-tablet-background.jpg);background-attachment:fixed;background-size:cover;height:100vh;height:calc(var(--vh, 1vh) * 100);background-position:center;background-repeat:no-repeat}main{align-items:center;text-align:left}main#home h1{margin-top:3vh}main .lg-heading{line-height:1;font-size:3rem;margin-top:1rem}main .sm-heading{font-size:2rem}.media{grid-template-columns:1fr;grid-template-areas:"img" "showreel" "music" "showshots"}}@media screen and (max-width: 500px){body#bg-img{background:url(../img/peter-headshot-larger-smartphones-background.jpg);background-attachment:fixed;background-size:cover;height:100vh;background-position:center;background-repeat:no-repeat}main{padding:2rem;align-items:left;text-align:left}main#home .tagline-box{position:absolute;bottom:2rem;left:2rem;padding:0 1rem 0 0}main#contact{padding:0.5rem}main#home h1{margin-top:3vh}main .lg-heading{line-height:1;font-size:3rem;margin-top:1rem}main .sm-heading{font-size:1.5rem}main .form-holder{padding:0}main .form-holder .bottom-circle{display:none}main .form-holder .big-circle{display:none}main .form-holder .form{display:grid;place-items:center}main .form-holder .form .contact-info{width:100%;padding:1rem 0.5rem;align-items:center;display:grid;place-items:center}main .form-holder .form .contact-info:before{display:none}main .form-holder .form .contact-info h3,main .form-holder .form .contact-info p{text-align:center}main .form-holder .form .contact-info h3{font-size:1.2rem}main .form-holder .form .contact-info p{font-size:0.9rem}main .form-holder .form .contact-form .circle.one{display:none}main .form-holder .form .contact-form .circle.two{display:none}main .form-holder .form .recaptcha{transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0}.headshots-container{width:95%}.headshots-container img{width:100%}}@media screen and (max-width: 374px){body#bg-img{background:url(../img/peter-headshot-larger-smartphones-background.jpg);background-attachment:fixed;background-size:cover;height:100vh;background-position:center;background-repeat:no-repeat}main{padding:2rem;align-items:center;text-align:left}main#home h1{margin-top:5vh}main .lg-heading{line-height:1;font-size:3rem;margin-top:1rem}main .sm-heading{font-size:1.5rem}.showgallerylink{z-index:11}.form-holder{padding:0}.form-holder .bottom-circle{display:none}.form-holder .big-circle{display:none}.form-holder .form{display:grid;place-items:center}.form-holder .form .contact-info{width:100%;padding:0.5rem;align-items:center;display:grid;place-items:center}.form-holder .form .contact-info:before{display:none}.form-holder .form .contact-info h3,.form-holder .form .contact-info p{text-align:center}.form-holder .form .contact-info h3{font-size:1.2rem}.form-holder .form .contact-info p{font-size:0.9rem}.form-holder .form .contact-form{padding:0.5rem}.form-holder .form .contact-form:before{display:none}.form-holder .form .contact-form .circle.one{display:none}.form-holder .form .contact-form .circle.two{display:none}}@media screen and (max-width: 350px){body#bg-img{background:url(../img/peter-headshot-small-mobile-background.jpg);background-attachment:fixed;background-size:cover;height:100vh;background-position:center;background-repeat:no-repeat}main{padding:2rem;align-items:center;text-align:left}main#home h1{margin-top:5vh}main .lg-heading{line-height:1;font-size:3rem;margin-top:1rem}main .sm-heading{font-size:1.5rem}.menu-branding .portrait{background:url(../img/peter-headshot-portrait-small.jpg);background-size:cover;background-position:center;width:100px;height:120px}}